音乐播放过程当中,切换到应用其余页面时,用后台的状态栏切换音乐时音乐会暂停。java
华为audio接口只能在页面中使用,当audio所在的页面退出后,页面销毁,绑定的上下文对象也随之不存在。 此时,在通知栏上一首、下一首切换歌曲时,后台播放服务首先暂停当前歌曲,状态重置,可是audio接口的绑定事件找不到上下文对象,没法触发previous和next事件,致使上述现象。api
在应用首页监听audio事件,而不单单是在播放页面添加,当用户离开播放页面时,依然能够监听到audio的每一个事件,从而去控制播放逻辑。app
注意:因为华为快应用引擎不支持在app.ux里调用audio接口,因此当用户退出了整个应用,虽而后台依然在播放,可是快应用是不能收到audio的事件回调的。oop
如下示例demo中有两个页面:首页Main和音频Audio。为了不重复代码,可维护性,将audio的相关代码独立出来做为一个公共的js,方便每一个页面调用。ui
1)公共utils.js:this
import audio from '@system.audio'; export default{ listenAudio() { var that=this; console.info("util.js listenAudio "); audio.onplay = function () { console.log('audio onplay') } audio.onpause = function () { console.log('audio onpause') } audio.onended = function () { console.log('audio onended') } audio.ondurationchange = function () { console.log('util.js ondurationchange') var total = audio.duration console.log('util.js ondurationchange total=' + total) } audio.ontimeupdate = function () { var time = audio.currentTime // console.log('util.js ontimeupdate time=' + time) } audio.onprevious = function () { audio.cover = 'https://xx.jpg' audio.title = "钢琴曲" audio.artist = "莫扎特" // Replace with NetEase cloud music resource link audio.src = 'https://xx.mp3' console.log(' util.js on previout event from notification ') } audio.onnext = function () { audio.cover = 'xx.jpg' audio.title = '轻音乐'; audio.artist = '王菲' // Replace with NetEase cloud music resource link audio.src = 'https://xx.mp3' console.log(' util.js on next event from notification ') } }, getAudioPlayState() { audio.getPlayState({ success: function (data) { console.log(`getAudioPlayState success: state: ${data.state},src:${data.src}, currentTime:${data.currentTime},autoplay:${data.autoplay},loop:${data.loop}, volume: ${data.volume},muted:${data.muted},notificationVisible:${data.notificationVisible}`); }, fail: function (data, code) { console.log('getAudioPlayState fail, code=' + code); } }); }, startPlay() { audio.play(); }, pausePlay() { audio.pause(); }, stopPlay() { audio.stop(); }, seekProress(len) { audio.currentTime = len; }, setVolume(value) { audio.volume = value; }, setMute(isMuted) { audio.muted = isMuted }, setLoop(isloop) { audio.loop = isloop }, setStreamType() { if (audio.streamType === 'music') { audio.streamType = 'voicecall' } else { audio.streamType = 'music' } console.error('audio.streamType =' + audio.streamType); }, setTitle(title) { console.info('setTitle=' + title); audio.title = title; }, setArtist(artist) { console.info('setArtist artist=' + artist) ; audio.artist = artist; }, setCover(src) { console.info('setCover src=' + src); audio.cover = src; } }
2) 在首页Main的生命周期onShow方法中添加监听audio事件,调用utils.js中的listenAudio,代码以下:code
<script> import utils from '../Util/utils.js'; module.exports = { onShow(options) { utils.listenAudio(); }, } </script>
3) 在音频Audio页面生命周期onShow方法中添加监听audio事件,调用utils.js中的listenAudio,因为在播放页面须要显示播放进度,单独监听了进度回调事件,代码以下:对象
onShow(options) { var that = this; utils.listenAudio(); audio.ondurationchange = function () { console.log('audio ondurationchange') that.total = audio.duration console.log('audio ondurationchange total=' + that.total) } audio.ontimeupdate = function () { that.time = audio.currentTime console.log('ontimeupdate time=' + that.time) } },
欲了解更多详情,请参见:接口
快应用audio开发指导:生命周期
https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-api-audio
原文连接:https://developer.huawei.com/consumer/cn/forum/topic/0204411131669010359?fid=18
原做者:Mayism