微信小程序媒體組件audio,微信小程序媒體示例代碼

2017-12-22

導(dǎo)讀：audio 音頻。屬性名類(lèi)型默認(rèn)值說(shuō)明 id String audio 組件的唯一標(biāo)識(shí)符 src String 要播放音頻的資源地址 loop Boolean false 是否循環(huán)播放 controls Boolean true 是否顯示默認(rèn)控件 poster String 默認(rèn)控件...

audio

音頻。

屬性名	類(lèi)型	默認(rèn)值	說(shuō)明
id	String		audio 組件的唯一標(biāo)識(shí)符
src	String		要播放音頻的資源地址
loop	Boolean	false	是否循環(huán)播放
controls	Boolean	true	是否顯示默認(rèn)控件
poster	String		默認(rèn)控件上的音頻封面的圖片資源地址，如果 controls 屬性值為 false 則設(shè)置 poster 無(wú)效
name	String	未知音頻	默認(rèn)控件上的音頻名字，如果 controls 屬性值為 false 則設(shè)置 name 無(wú)效
author	String	未知作者	默認(rèn)控件上的作者名字，如果 controls 屬性值為 false 則設(shè)置 author 無(wú)效
binderror	EventHandle		當(dāng)發(fā)生錯(cuò)誤時(shí)觸發(fā) error 事件，detail = {errMsg: MediaError.code}
bindplay	EventHandle		當(dāng)開(kāi)始/繼續(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 事件

MediaError.code

返回錯(cuò)誤碼	描述
MEDIA_ERR_ABORTED	獲取資源被用戶(hù)禁止
MEDIA_ERR_NETWORD	網(wǎng)絡(luò)錯(cuò)誤
MEDIA_ERR_DECODE	解碼錯(cuò)誤
MEDIA_ERR_SRC_NOT_SUPPOERTED	不合適資源

示例代碼：

<!-- audio.wxml -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></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">回到開(kāi)頭</button>

// audio.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)
  }
})

相關(guān)api：wx.createAudioContext

更多微信小程序開(kāi)發(fā)教程，可以關(guān)注hi小程序。

第二部分：如何開(kāi)通一個(gè)小商店