微信小程序 audio音頻播放詳解及實例
微信小程序 audio音頻播放
audio
audio為音頻組件,我們可以輕松的在小程序中播放音頻。
屬性名 | 類型 | 默認(rèn)值 | 說明 |
---|---|---|---|
id | String | video 組件的唯一標(biāo)識符, | |
src | String | 要播放音頻的資源地址 | |
loop | Boolean | false | 是否循環(huán)播放 |
controls | Boolean | true | 是否顯示默認(rèn)控件 |
poster | String | 默認(rèn)控件上的音頻封面的圖片資源地址,如果 controls 屬性值為 false 則設(shè)置 poster 無效 | |
name | String | 未知音頻 | 默認(rèn)控件上的音頻名字,如果 controls 屬性值為 false 則設(shè)置 name 無效 |
author | String | 未知作者 | 默認(rèn)控件上的作者名字,如果 controls 屬性值為 false 則設(shè)置 author 無效 |
binderror | EventHandle | 當(dāng)發(fā)生錯誤時觸發(fā) error 事件,detail = {errMsg: MediaError.code} | |
bindplay | EventHandle | 當(dāng)開始/繼續(xù)播放時觸發(fā)play事件 | |
bindpause | EventHandle | 當(dāng)暫停播放時觸發(fā) pause 事件 | |
bindtimeupdate | EventHandle | 當(dāng)播放進(jìn)度改變時觸發(fā) timeupdate 事件,detail = {currentTime, duration} | |
bindended | EventHandle | 當(dāng)播放到末尾時觸發(fā) ended 事件 |
錯誤返回碼:MediaError.code
返回錯誤碼 描述
返回錯誤碼 | 描述 |
---|---|
MEDIA_ERR_ABORTED | 獲取資源被用戶禁止 |
MEDIA_ERR_NETWORD | 網(wǎng)絡(luò)錯誤 |
MEDIA_ERR_DECODE | 解碼錯誤 |
MEDIA_ERR_SRC_NOT_SUPPOERTED | 不合適資源 |
wx.createAudioContext(audioId)
創(chuàng)建并返回audio上下文audioContext對象,控制音頻的播放暫停與跳轉(zhuǎn)。
方法 | 參數(shù) | 說明 |
---|---|---|
play | 無 | 播放 |
pause | 無 | 暫停 |
seek | position | 跳轉(zhuǎn)到指定位置,單位 s |
wxml
<!-- poster:音頻封面圖片 name:歌名 author:歌手 src:音頻地址 controls:是否顯示默認(rèn)控件,也就是下面這個東東 loop:是否循環(huán)播放 id:標(biāo)注唯一組件以this.audioCtx = wx.createAudioContext('myAudio')獲取控制組件的對象。 bindplay:播放時觸發(fā)該事件 bindpause:停止時觸發(fā)該事件 bindtimeupdate:時間改變時觸發(fā),該函數(shù)攜帶有參數(shù)detail={currentTime, duration}當(dāng)前時間,持續(xù)播放時間 bindended:播放結(jié)束時觸發(fā) binderror;播放錯誤時調(diào)用,攜帶參數(shù)detail = {errMsg: MediaError.code} --> <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop bindplay="funplay" bindpause="funpause" bindtimeupdate="funtimeupdate" bindended="funended" binderror="funerror"></audio> <button type="primary" bindtap="audioPlay">播放</button> <button type="primary" bindtap="audioPause">暫停</button> <button type="primary" bindtap="audio14">設(shè)置當(dāng)前播放時間為14秒</button> <button type="primary" bindtap="audioStart">回到開頭</button>
js
Page({ onReady: function (e) { // 使用 wx.createAudioContext 獲取 audio 上下文 context this.audioCtx = wx.createAudioContext('myAudio') }, data: { poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000', name: '此時此刻', author: '許巍', src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46', }, audioPlay: function () { this.audioCtx.play() }, audioPause: function () { this.audioCtx.pause() }, audio14: function () { this.audioCtx.seek(14) }, audioStart: function () { this.audioCtx.seek(0) }, funplay: function(){ console.log("audio play"); }, funpause: function(){ console.log("audio pause"); }, funtimeupdate: function(u){ console.log(u.detail.currentTime); console.log(u.detail.duration); }, funended: function(){ console.log("audio end"); }, funerror: function(u){ console.log(u.detail.errMsg); } })
效果
今天早上發(fā)現(xiàn)微信小程序的官方文檔在實時跟新,之前的有些標(biāo)簽或者方法不見了。以上是控制audio組件的方法是根據(jù)組件的唯一id生成相應(yīng)的實例對象,通過對象的各種發(fā)放來控制組件。我現(xiàn)在看到的官方文檔是通過有個action屬性,給屬性指定特定的值組件就會執(zhí)行特定的動作。
method | 描述 | data |
---|---|---|
play | 播放 | |
pause | 暫停 | |
setPlaybackRate | 調(diào)整速度 | 倍速 |
setCurrentTime | 設(shè)置當(dāng)前時間 | 播放時間 |
.wxml
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="http://qqma.tingge123.com:823/mp3/2015-06-13/1434188181.mp3" action="{{action}}" controls loop></audio> <button type="primary" bindtap="audioPlay">播放</button> <button type="primary" bindtap="audioPause">暫停</button> <button type="primary" bindtap="audioPlaybackRateSpeedUp">調(diào)為2倍速</button> <button type="primary" bindtap="audioPlaybackRateNormal">調(diào)為1倍速</button> <button type="primary" bindtap="audioPlaybackRateSlowDown">調(diào)為0.5倍速</button> <button type="primary" bindtap="audio14">設(shè)置當(dāng)前播放時間為14秒</button> <button type="primary" bindtap="audioStart">回到開頭</button>
.js
Page({ data: { poster: 'http://pic.pimg.tw/pam86591/1408719752-3322564110_n.jpg', name: 'Sugar', author: 'Maroon 5' }, audioPlay: function () { this.setData({ action: { method: 'play' } }); }, audioPause: function () { this.setData({ action: { method: 'pause' } }); }, audioPlaybackRateSpeedUp: function () { this.setData({ action: { method: 'setPlaybackRate', data: 2//加快速度 } }); }, audioPlaybackRateSlowDown: function () { this.setData({ action: { method: 'setPlaybackRate', data: 0.5//小于零放慢速度 } }); }, audio14: function () { this.setData({ action: { method: 'setCurrentTime', data: 14 } }); }, audioStart: function () { this.setData({ action: { method: 'setCurrentTime', data: 0 } }); } })
效果
上一種方法好像沒有不能控制播放速度,這種方法相比上一種比較方便,并且效率上應(yīng)該也比較高。
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章

package.json依賴環(huán)境相關(guān)屬性詳解

網(wǎng)頁的標(biāo)準(zhǔn),IMG不支持onload標(biāo)簽怎么辦