3.1音乐播放 · 微信小程序

# 小程序音乐播放 ## 1.背景音乐播放 > `wx.getBackgroundAudioManager() `获取全局唯一的背景音频管理器。小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。 > 从微信客户端6.7.2版本开始，若需要在小程序切后台后继续播放音频，需要在 app.json 中配置 requiredBackgroundModes 属性。开发版和体验版上可以直接生效，正式版还需通过审核。 ### 属性 >[danger] **`string src `** > 音频的数据源（2.2.3 开始支持云文件ID）。默认为空字符串，当设置了新的 src 时，会自动开始播放，目前支持的格式有 m4a, aac, mp3, wav。 >[success] **`number startTime `** 音频开始播放的位置（单位：s）。 >[info]**`string title `** 音频标题，用于原生音频播放器音频标题（必填）。原生音频播放器中的分享功能，分享出去的卡片标题，也将使用该值。 >[warning]**`string epname `** 专辑名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。 >[danger]**`string singer `** 歌手名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。 >[success]**`string coverImgUrl `** 封面图 URL，用于做原生音频播放器背景图。原生音频播放器中的分享功能，分享出去的卡片配图及背景也将使用该图。 >[info]**`string webUrl `** 页面链接，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。 >[warning]**`string protocol `** >*支持版本 >= 1.9.94* 音频协议。默认值为 'http'，设置 'hls' 可以支持播放 HLS 协议的直播音频。 >[danger]**`number duration `** 当前音频的长度（单位：s），只有在有合法 src 时返回。（只读） >[success]**`number currentTime `** 当前音频的播放位置（单位：s），只有在有合法 src 时返回。（只读） >[info]**`boolean paused `** 当前是否暂停或停止。（只读） >[warning]**`number buffered `** 音频已缓冲的时间，仅保证当前播放时间点到此时间点内容已缓冲。（只读） ### 方法 #### **1.音乐事件（常用的有三个：play|pause|stop）** ``` BackgroundAudioManager.play() 播放音乐 BackgroundAudioManager.pause() 暂停音乐 BackgroundAudioManager.seek(number currentTime) 跳转到指定位置 BackgroundAudioManager.stop() 停止音乐 ``` #### **2.音乐监听事件（onPlay|onPause|onStop）** ``` BackgroundAudioManager.onCanPlay(function callback) 监听背景音频进入可以播放状态。但不保证后面可以流畅播放 BackgroundAudioManager.onWaiting(function callback) 监听音频加载中事件。当音频因为数据不足，需要停下来加载时会触发 BackgroundAudioManager.onError(function callback) 监听背景音频播放错误事件 BackgroundAudioManager.onPlay(function callback) 监听背景音频播放事件 BackgroundAudioManager.onPause(function callback) 监听背景音频暂停事件 BackgroundAudioManager.onSeeking(function callback) 监听背景音频开始跳转操作事件 BackgroundAudioManager.onSeeked(function callback) 监听背景音频完成跳转操作事件 BackgroundAudioManager.onEnded(function callback) 监听背景音频自然播放结束事件 BackgroundAudioManager.onStop(function callback) 监听背景音频停止事件 BackgroundAudioManager.onTimeUpdate(function callback) 监听背景音频播放进度更新事件 BackgroundAudioManager.onNext(function callback) 监听用户在系统音乐播放面板点击下一曲事件（仅iOS） BackgroundAudioManager.onPrev(function callback) 监听用户在系统音乐播放面板点击上一曲事件（仅iOS） ``` ### 代码实列首先定义一个常量，来代替`wx.getBackgroundAudioManager() ` 减少代码量 ``` const playSong = wx.getBackgroundAudioManager(); ``` 再定义一个播放状态`isPlay:false ` 初始状态为`false`不播放 ``` data：{ isPlay:false } ``` 设置监听函数 ``` /* 音乐播放函数--监听页面中音乐状态是否为播放,播放就改变isPlay为true */ playSong.onPlay(() => { self.setData({ isPlay: true }) }); /* 音乐暂停函数--监听页面中音乐状态是否为暂停,暂停就改变isPlay为false */ playSong.onPause(() => { self.setData({ isPlay: false }) }); /* 音乐停止函数--监听页面中音乐状态是否为停止,停止就改变isPlay为false */ playSong.onStop(() => { self.setData({ isPlay: false }) }); ``` 设置点击播放事件 ``` /* 点击播放或者停止事件 */ playMusic() { var self = this; var url = this.data.music.url;//使用this，指明当前页面的整个数据data var title = this.data.music.title; var coverImg = this.data.music.coverImg; /*执行播放音乐函数时，如果isPlay值为true即正在播放，则执行playSong.pause()停止播放，更改相关参数值*/ if (this.data.isPlay) { playSong.stop(); this.setData({ isPlay: false }); } //如果沒有播放则更改isPlay的状态则音乐就会播放，然后找到该音乐的地址，title，以及切换音乐背景图片 else { playSong.src = url, playSong.title = self.data.music.title, playSong.coverImg = self.data.music.coverImg, // console.log(title); this.setData({ isPlay: true }); } }, ``` ## 2.音乐 `audioContext `通过` id `跟一个 `<audio/> `组件绑定，操作对应的 `<audio/> `组件。 ### 方法 ``` AudioContext.setSrc(string src) 设置音频地址 AudioContext.play() 播放音频。 AudioContext.pause() 暂停音频。 AudioContext.seek(number position) 跳转到指定位置。 ``` ### 示例代码 ```  <audio src="{{src}}" id="myAudio" ></audio> <button type="primary" bindtap="audioPlay">播放</button> <button type="primary" bindtap="audioPause">暂停</button> <button type="primary" bindtap="audio14">设置当前播放时间为14秒</button> <button type="primary" bindtap="audioStart">回到开头</button> ``` ``` // audio.js Page({ onReady (e) { // 使用 wx.createAudioContext 获取 audio 上下文 context this.audioCtx = wx.createAudioContext('myAudio') this.audioCtx.setSrc('http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46') this.audioCtx.play() }, data: { src: '' }, audioPlay () { this.audioCtx.play() }, audioPause () { this.audioCtx.pause() }, audio14 () { this.audioCtx.seek(14) }, audioStart () { this.audioCtx.seek(0) } }) ```