微信小程序--音乐播放器案例

1.认识audio组件id:
这是audio组件在页面中唯一标识符。
控制audio组件中的音乐播放，可设置可不设置。
src: 要播放音频的资源地址。
loop ： 设置是否循环播放，默认为false。
controls：设置是否显示默认控件，默认为true。
poster：设置默认控件上的音频封面的图片资源地址，若为false，则设置无效。name：默认控件上的音频名字，controls属性为false，则无效。
author：默认控件上的作着名字。同上。、、、
biinderror：但发生错误时触发error事件，detail={errMsg:MediaError.code}。bindplay：当开始/继续播放时触发play事件。
bindpause：当暂停播放时触发pause事件。
bindtimeupdate：当播放进度改变时触发timeupdate事件，
detail={current Time，duration}。

bindended：当播放到末尾时触发ended事件。

如下时音乐播放示例：

audio.wxml

< view class="page">
< view class="page_hd">
< text class="page_title">aduio音频< /text>
< /view>
< view class="page_bd" >
< view class="section section_gap" style="text-align:center;" >
< audio id="audio1" src="{{current.src}}" poster="{{current.poster}}"name="{{current.name}}" author="{{current.author}}"action="{{audioAction}}" controls>< /audio>
< /view>
< /view>
< /view>

audio.js:

Page({
  data: {     
   current:{    
    poster:'http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7', 
      name:'青云志主题曲《浮诛》',    
       author:'张杰',     
       src:'http://sc1.111ttt.com/2016/1/09/28/202280605509.mp3'  
        },     
        audioAction:{    
          method:'pause'    
              },
   onReady(e) {              
                          // 使用 wx.createAudioContext 获取 audio 上下文 context   
 this.audioCtx =     wx.createAudioContext('Audio1');  
                              },     
                               audioPlay() {   
                                this.audioCtx.play() 
                                 },  
                                 audioPause() {    
                                 this.audioCtx.pause() 
                                  },  
 audio14() { 
       this.audioCtx.seek(20) 
     },  
    audioStart() {    t
    his.audioCtx.seek(0) 
     }
  } 
})

2.控制audio组件

wx.createAudioContext接口函数获取界面中的audio组件。
有了wx.createAudioContext接口函数，修改audio.wxml文件

< view class="btn-area">
< button type="primary" bindtap="audioPlay">播放< /button>
< button type="primary" bindtap="audioPause">暂停< /button>
< button type="primary" bindtap="audio14">设置当前播放时间为20秒< /button>
< button type="primary" bindtap="audioStart">回到开头< /button>
< /view>

audio.js:

Page({
  data: {      current:{     poster:'http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7',     
  name:'青云志主题曲《浮诛》',   
    author:'张杰',  
       src:'http://sc1.111ttt.com/2016/1/09/28/202280605509.mp3'  
        },    
         audioAction:{  
              method:'pause'    
                  },
   onReady(e) {  
     // 使用 wx.createAudioContext 获取 audio 上下文 context   
      this.audioCtx = wx.createAudioContext('Audio1');  
          },      
          audioPlay() {   
           this.audioCtx.play() 
            }, 
             audioPause() {   
              this.audioCtx.pause() 
               },  
               audio14() {  
                 this.audioCtx.seek(20) 
                  }, 
                   audioStart() { 
                      this.audioCtx.seek(0)
                        }
  } 
   })

新建audioapi,
audioapi.wxml:

< view class="page">
< view class="page_hd">
< text class="page_title">aduio音频< /text>
< /view>
< view class="page_bd" >
< view class="btn-area">
< button type="primary" bindtap="tapPlay">播放< /button>
< button type="primary" bindtap="tapPause">暂停< /button>
< button type="primary" bindtap="tapSeek">设置播放进度< /button>
< button type="primary" bindtap="tapStop">停止播放< /button>
< button type="primary" bindtap="tapGetPlayState">获取播放状态< /button>

< /view>
< /view>
< /view>

audioapi.js:

Page({
tapPlay:function(){  
wx.playBackgroundAudio({  
  dataUrl: 'http://sc1.111ttt.com/2016/1/09/28/202280605509.mp3',  
    title:'青云志主题曲《浮诛》',    coverImgUrl:'http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7' 
     })
     },
     
tapPause:function(){  
wx.pauseBackgroundAudio();
},

tapSeek:function(){  
wx.seekBackgroundAudio({   
 position: 30 
  }
  )},
tapStop:function(){  
wx.stopBackgroundAudio()
},
tapGetPlayState:function(){  
wx.getBackgroundAudioPlayerState({   
 success:function(res){    
   console.log(res)   
    }
      }
      )},
onLoad:function(options){  
wx.onBackgroundAudioPlay(function(){  
  console.log('监听音乐播放器，开始播放音乐') 
   })  
   wx.onBackgroundAudioPause(function(){    
   console.log('监听音乐暂停，暂停了音乐')  
   })  
   wx.onBackgroundAudioStop(function(){    
   console.log('监听音乐播放器，停止了音乐')  
   }
   )}
 })