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

2017-12-22

導讀：audio 音頻。屬性名類型默認值說明 id String audio 組件的唯一標識符 src String 要播放音頻的資源地址 loop Boolean false 是否循環播放 controls Boolean true 是否顯示默認控件 poster String 默認控件...

audio

音頻。

屬性名	類型	默認值	說明
id	String		audio 組件的唯一標識符
src	String		要播放音頻的資源地址
loop	Boolean	false	是否循環播放
controls	Boolean	true	是否顯示默認控件
poster	String		默認控件上的音頻封面的圖片資源地址，如果 controls 屬性值為 false 則設置 poster 無效
name	String	未知音頻	默認控件上的音頻名字，如果 controls 屬性值為 false 則設置 name 無效
author	String	未知作者	默認控件上的作者名字，如果 controls 屬性值為 false 則設置 author 無效
binderror	EventHandle		當發生錯誤時觸發 error 事件，detail = {errMsg: MediaError.code}
bindplay	EventHandle		當開始/繼續播放時觸發play事件
bindpause	EventHandle		當暫停播放時觸發 pause 事件
bindtimeupdate	EventHandle		當播放進度改變時觸發 timeupdate 事件，detail = {currentTime, duration}
bindended	EventHandle		當播放到末尾時觸發 ended 事件

MediaError.code

返回錯誤碼	描述
MEDIA_ERR_ABORTED	獲取資源被用戶禁止
MEDIA_ERR_NETWORD	網絡錯誤
MEDIA_ERR_DECODE	解碼錯誤
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">設置當前播放時間為14秒</button>
<button type="primary" bindtap="audioStart">回到開頭</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: '此時此刻',
    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)
  }
})

相關api：wx.createAudioContext

更多微信小程序開發教程，可以關注hi小程序。

第二部分：如何開通一個小商店

一级片大奶子_色又黄又爽18禁免费视频_热久久久久久久_久久久精品一区二区_日韩av不卡在线播放_精品国内自产拍在线观看视频

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

audio