快捷導(dǎo)航

微信小程序 audio音頻播放詳解及實(shí)例

更新時(shí)間：2016年11月02日 16:15:52 投稿：lqh

這篇文章主要介紹了微信小程序 audio音頻播放詳解及實(shí)例的相關(guān)資料,附有實(shí)例代碼及實(shí)現(xiàn)效果圖，對(duì)初學(xué)者是個(gè)很好的幫助，需要的朋友可以參考下

微信小程序 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
   }
  });
 }
})

效果