微信小程序 audio音頻播放詳解及實(shí)例
微信小程序 audio音頻播放
audio
audio為音頻組件,我們可以輕松的在小程序中播放音頻。
屬性名 | 類型 | 默認(rèn)值 | 說明 |
---|---|---|---|
id | String | video 組件的唯一標(biāo)識(shí)符, | |
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ā)生錯(cuò)誤時(shí)觸發(fā) error 事件,detail = {errMsg: MediaError.code} | |
bindplay | EventHandle | 當(dāng)開始/繼續(xù)播放時(shí)觸發(fā)play事件 | |
bindpause | EventHandle | 當(dāng)暫停播放時(shí)觸發(fā) pause 事件 | |
bindtimeupdate | EventHandle | 當(dāng)播放進(jìn)度改變時(shí)觸發(fā) timeupdate 事件,detail = {currentTime, duration} | |
bindended | EventHandle | 當(dāng)播放到末尾時(shí)觸發(fā) ended 事件 |
錯(cuò)誤返回碼:MediaError.code
返回錯(cuò)誤碼 描述
返回錯(cuò)誤碼 | 描述 |
---|---|
MEDIA_ERR_ABORTED | 獲取資源被用戶禁止 |
MEDIA_ERR_NETWORD | 網(wǎng)絡(luò)錯(cuò)誤 |
MEDIA_ERR_DECODE | 解碼錯(cuò)誤 |
MEDIA_ERR_SRC_NOT_SUPPOERTED | 不合適資源 |
wx.createAudioContext(audioId)
創(chuàng)建并返回audio上下文audioContext對(duì)象,控制音頻的播放暫停與跳轉(zhuǎn)。
方法 | 參數(shù) | 說明 |
---|---|---|
play | 無 | 播放 |
pause | 無 | 暫停 |
seek | position | 跳轉(zhuǎn)到指定位置,單位 s |
wxml
<!-- poster:音頻封面圖片 name:歌名 author:歌手 src:音頻地址 controls:是否顯示默認(rèn)控件,也就是下面這個(gè)東東 loop:是否循環(huán)播放 id:標(biāo)注唯一組件以this.audioCtx = wx.createAudioContext('myAudio')獲取控制組件的對(duì)象。 bindplay:播放時(shí)觸發(fā)該事件 bindpause:停止時(shí)觸發(fā)該事件 bindtimeupdate:時(shí)間改變時(shí)觸發(fā),該函數(shù)攜帶有參數(shù)detail={currentTime, duration}當(dāng)前時(shí)間,持續(xù)播放時(shí)間 bindended:播放結(jié)束時(shí)觸發(fā) binderror;播放錯(cuò)誤時(shí)調(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)前播放時(shí)間為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: '此時(shí)此刻', 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)微信小程序的官方文檔在實(shí)時(shí)跟新,之前的有些標(biāo)簽或者方法不見了。以上是控制audio組件的方法是根據(jù)組件的唯一id生成相應(yīng)的實(shí)例對(duì)象,通過對(duì)象的各種發(fā)放來控制組件。我現(xiàn)在看到的官方文檔是通過有個(gè)action屬性,給屬性指定特定的值組件就會(huì)執(zhí)行特定的動(dòng)作。
method | 描述 | data |
---|---|---|
play | 播放 | |
pause | 暫停 | |
setPlaybackRate | 調(diào)整速度 | 倍速 |
setCurrentTime | 設(shè)置當(dāng)前時(shí)間 | 播放時(shí)間 |
.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)前播放時(shí)間為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)該也比較高。
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信小程序?qū)崿F(xiàn)播放音頻
- 微信小程序?qū)崿F(xiàn)錄音與音頻播放功能
- 微信小程序?qū)崿F(xiàn)音頻文件播放進(jìn)度的實(shí)例代碼
- 微信小程序多音頻播放進(jìn)度條問題
- 微信小程序獲取音頻時(shí)長與實(shí)時(shí)獲取播放進(jìn)度問題
- IOS中微信小程序播放緩存的音頻文件的方法
- 微信小程序page的生命周期和音頻播放及監(jiān)聽實(shí)例詳解
- 微信小程序開發(fā)之錄音機(jī) 音頻播放 動(dòng)畫實(shí)例 (真機(jī)可用)
- 微信小程序-圖片、錄音、音頻播放、音樂播放、視頻、文件代碼實(shí)例
- 微信小程序?qū)崿F(xiàn)播放音頻功能
相關(guān)文章
移動(dòng)開發(fā)之自適應(yīng)手機(jī)屏幕寬度
這篇文章主要介紹了移動(dòng)開發(fā)之自適應(yīng)手機(jī)屏幕寬度的相關(guān)資料,網(wǎng)上關(guān)于這方面的文章有很多,重復(fù)的東西本文不再贅述,僅提供思路,并解釋一些其他文章講述模糊的地方,需要的朋友可以參考下2016-11-11

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

微信小程序 詳解下拉加載與上拉刷新實(shí)現(xiàn)方法

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