微信小程序  audio音频播放详解及实例

<!-- 
  poster:音频封面图片
  name:歌名
  author:歌手
  src：音频地址
  controls:是否显示默认控件，也就是下面这个东东
                       
  loop:是否循环播放
  id:标注唯一组件以this.audioCtx = wx.createAudioContext('myAudio')获取控制组件的对象。
  bindplay:播放时触发该事件
  bindpause：停止时触发该事件
  bindtimeupdate:时间改变时触发，该函数携带有参数detail={currentTime, duration}当前时间，持续播放时间
  bindended:播放结束时触发
  binderror；播放错误时调用，携带参数detail = {errMsg: MediaError.code}

 -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="/UploadFiles/2021-04-02/{{src}}">

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"audio play");
 },
 funpause: function(){
   console.log("audio pause");
 },
 funtimeupdate: function(u){
   console.log(u.detail.currentTime);
   console.log(u.detail.duration);
 },
 funended: function(){
   console.log("audio end");
 },
 funerror: function(u){
   console.log(u.detail.errMsg);
 }
})



效果


 
 今天早上发现微信小程序的官方文档在实时跟新，之前的有些标签或者方法不见了。以上是控制audio组件的方法是根据组件的唯一id生成相应的实例对象，通过对象的各种发放来控制组件。我现在看到的官方文档是通过有个action属性，给属性指定特定的值组件就会执行特定的动作。


  
    
      method
      描述
      data
    
  
  
    
      play
      播放
       
    
    
      pause
      暂停
       
    
    
      setPlaybackRate
      调整速度
      倍速
    
    
      setCurrentTime
      设置当前时间
      播放时间
    
  


.wxml






<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="/UploadFiles/2021-04-02/1434188181.mp3">

.js






Page({
 data: {
  poster: 'http://pic.pimg.tw/pam86591/1408719752-3322564110_n.jpg',
  name: 'Sugar',
  author: 'Maroon 5'
 },
 audioPlay: function () {
  this.setData({
   action: {
    method: 'play'
   }
  });
 },
 audioPause: function () {
  this.setData({
   action: {
    method: 'pause'
   }
  });
 },
 audioPlaybackRateSpeedUp: function () {
  this.setData({
   action: {
    method: 'setPlaybackRate',
    data: 2//加快速度
   }
  });
 },
 audioPlaybackRateSlowDown: function () {
  this.setData({
   action: {
    method: 'setPlaybackRate',
    data: 0.5//小于零放慢速度
   }
  });
 },
 audio14: function () {
  this.setData({
   action: {
    method: 'setCurrentTime',
    data: 14
   }
  });
 },
 audioStart: function () {
  this.setData({
   action: {
    method: 'setCurrentTime',
    data: 0
   }
  });
 }
})




效果


 
上一种方法好像没有不能控制播放速度，这种方法相比上一种比较方便，并且效率上应该也比较高。
 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！