微信小程序 audio 音频组件-蒲公英云

微信小程序 audio 音频组件

完整微信小程序(Java后端) 技术贴目录清单页面（必看）

音频。1.6.0版本开始，该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口

属性	类型	默认值	必填	说明	最低版本
id	string		否	audio 组件的唯一标识符	1.0.0
src	string		否	要播放音频的资源地址	1.0.0
loop	boolean	false	否	是否循环播放	1.0.0
controls	boolean	false	否	是否显示默认控件	1.0.0
poster	string		否	默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效	1.0.0
name	string	未知音频	否	默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效	1.0.0
author	string	未知作者	否	默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效	1.0.0
binderror	eventhandle		否	当发生错误时触发 error 事件，detail = {errMsg:MediaError.code}	1.0.0
bindplay	eventhandle		否	当开始/继续播放时触发play事件	1.0.0
bindpause	eventhandle		否	当暂停播放时触发 pause 事件	1.0.0
bindtimeupdate	eventhandle		否	当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}	1.0.0
bindended	eventhandle		否	当播放到末尾时触发 ended 事件	1.0.0

MediaError.code

返回错误码	描述
1	获取资源被用户禁止
2	网络错误
3	解码错误
4	不合适资源

示例代码

在开发者工具中预览效果

index.xml

<view class="page">
  <view class="page__hd">
    <text class="page__title">audio</text>
    <text class="page__desc">音频</text>
  </view>
  <view class="page__bd">
    <view class="section section_gap">
      <audio src="{ {current.src}}" poster="{ {current.poster}}" name="{ {current.name}}" author="{ {current.author}}" action="{ {audioAction}}" bindplay="audioPlayed" bindtimeupdate="audioTimeUpdated" controls></audio>
    </view>
  </view>
  <view class="section section_gap">
    <text class="section__title">播放</text>
    <view class="body-view">
      <button bindtap="playAudio">播放</button>
    </view>
  </view>
  <view class="section section_gap">
    <text class="section__title">暂停</text>
    <view class="body-view">
      <button bindtap="pauseAudio">暂停</button>
    </view>
  </view>
  <view class="section section_gap">
    <text class="section__title">进度</text>
    <view class="body-view">
      <slider bindchange="timeSliderChanged" left-icon="cancel" right-icon="success_no_circle"/>
    </view>
  </view>
  <view class="section section_gap">
    <text class="section__title">播放速率</text>
    <view class="body-view">
      <slider min="1" max="4" bindchange="playbackRateSliderChanged" left-icon="cancel" right-icon="success_no_circle"/>
    </view>
  </view>
</view>

index.js

Page({ 
  data: { 
    current: { 
      poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
      name: '此时此刻',
      author: '许巍',
      src: 'https://win-web-nf01-sycdn.kuwo.cn/dfec2ffc8e070e96101b21bd804de6e7/60bed777/resource/n1/73/40/4073043717.mp3',
    },
    audioAction: { 
      method: 'pause'
    }
  },
  audioPlayed: function (e) { 
    console.log('audio is played')
  },
  audioTimeUpdated: function (e) { 
    this.duration = e.detail.duration;
  },
  timeSliderChanged: function (e) { 
    if (!this.duration)
      return;
    var time = this.duration * e.detail.value / 100;
    this.setData({ 
      audioAction: { 
        method: 'setCurrentTime',
        data: time
      }
    });
  },
  playbackRateSliderChanged: function (e) { 
    this.setData({ 
      audioAction: { 
        method: 'setPlaybackRate',
        data: e.detail.value
      }
    })
  },
  playAudio: function () { 
    this.setData({ 
      audioAction: { 
        method: 'play'
      }
    });
  },
  pauseAudio: function () { 
    this.setData({ 
      audioAction: { 
        method: 'pause'
      }
    });
  }
})