audio

音频。

属性	类型	默认值	必填	说明
id	String		否	audio 组件的唯一标识符
src	String		否	要播放音频的资源地址
loop	Boolean	false	否	是否循环播放
controls	Boolean	false	否	是否显示默认控件
show-progress	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

返回错误码**	说明	最低版本
1	获取资源被用户禁止
2	网络错误
3	解码错误
4	不合适资源

示例代码：

<!--pages/component/pages/audio/audio.mcml-->
<view class="container">
  <view class="statement">音频。</view>
  <view>
    <audio id="audio"
      name="{{name}}" 
      poster="{{poster}}" 
      author="{{author}}" 
      controls="{{controls}}"
      show-progress="{{showProgress}}"
      loop="{{loop}}"
      binderror="bindevent"
      bindplay="bindevent"
      bindpause="bindevent"
      bindtimeupdate="bindevent"
      bindended="bindevent"></audio>
  </view>
  <view>
    <view mc:for="{{audioList}}">{{(index + 1) + '. ' + item.name}}</view>
  </view>
  <view class="buttonContainer">
    <button size="mini" mc:for="{{methods}}" bindtap="{{item.method}}">{{item.desc}}</button>
  </view>
  <block mc:for="{{properties}}">
    <view class="cssname">{{item.name + ': ' + item.desc}}</view>
    <checkbox bindtap="propValueChanged" data-index="{{index}}" checked="{{item.value}}" value="{{item.prop}}">{{item.valueDesc}}</checkbox>
  </block>
  <block mc:for="{{events}}">
    <view class="cssname">{{item.name + ":" + item.desc}}, 参数event.detail</view>
    <text space="nbsp" user-select="true" class="scrollDetail">{{item.detail || ''}}</text>
  </block>
</view>

// pages/component/pages/audio/audio.js
Page({
  data: {
    events:[
      {"name" : "bindplay", "desc" : "当开始/继续播放时触发"},
      {"name" : "bindtimeupdate", "desc" : "当播放进度改变时触发"},
      {"name" : "bindpause", "desc" : "当暂停播放时触发"},
      {"name" : "bindended", "desc" : "当播放到末尾时触发"},
      {"name" : "binderror", "desc" : "播放出错时触发"}
    ],
    properties: [
      {"prop" : "controls", "name" : "controls", "desc": "是否显示默认播放控件", value: true, valueDesc: '显示'},
      {"prop" : "showProgress", "name" : "showProgress", "desc": "是否显示进度条", value: true, valueDesc: '显示'},
      {"prop" : "loop", "name" : "loop", "desc": "是否循环播放", value: false, valueDesc: '循环播放'}
    ],
    methods:[
      {method: 'play', desc: '播放'},
      {method: 'pause', desc: '暂停'},
      {method: 'seek', desc: '跳转到10秒处播放'},
      {method: 'stop', desc: '停止'},
      {method: 'setSrc', desc: '下一个'}
    ],
    audioList:[
      {
        'name' : 'audio1',
        'src' : 'http://test/audio1.mp3',
        'poster' : '/assets/images/audio/poster1.jpg',
        'author' : '作者1'
      },
      {
        'name' : 'audio2',
        'src' : 'http://test/audio2.mp3',
        'poster' : '/assets/images/audio/poster1.jpg',
        'author' : '作者2'
      }
    ],
    currentIndex: 0
  },
  onLoad: function (options) {
    var data = {}
    for(var i = 0; i < this.data.properties.length; i++){
      data[this.data.properties[i].prop] = this.data.properties[i].value
    }
    this.setData(data);
  },
  onReady: function(){
    this.audioCtx = mc.createAudioContext('audio');
    this.setCurrent(this.data.currentIndex);
  },
  setCurrent: function(index){
    var data = this.data.audioList[index];
    this.setData(data)
    this.audioCtx.setSrc(data.src)
  },
  setSrc: function(){
    this.data.currentIndex += 1;
    if(this.data.currentIndex >= this.data.audioList.length){
      this.data.currentIndex = 0;
    }
    this.setCurrent(this.data.currentIndex);
    this.playAudio();
  },
  play: function(){
    this.audioCtx.play();
  },
  pause: function(){
    this.audioCtx.pause();
  },
  seek: function(){
    this.audioCtx.seek(10);
  },
  stop: function() {
    this.audioCtx.stop();
  },
  propValueChanged: function(e){
    var item = this.data.properties[e.currentTarget.dataset.index];
    item.value = !item.value;
    var data = {};
    data[item.prop] = item.value;
    this.setData(data);
  },
  bindevent: function(e){
    var eventName = 'bind' + e.type;
    var index = 0;
    for(var i = 0; i < this.data.events.length; i++){
      if(this.data.events[i].name == eventName){
        index = i;
        break;
      }
    }
    var eventIndex = 'events[' + index + '].detail';
    this.setData({
      [eventIndex] : JSON.stringify(e, null, 2)
    })
  }
})

Keyboard shortcuts

开发文档

audio

MediaError.code