微信小程序媒體組件 audio

2022-05-11 16:10 更新

audio


音頻。

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

audio

相關api:wx.createAudioContext

以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號