pau 簡單的 body lan 此刻 ado uio 控制 直接

引言：

audio是微信小程序中的音頻組件，可以輕松實現小程序中播放/停止音頻等自定義動作。

附上微信小程序audio組件的相關屬性說明：https://mp.weixin.qq.com/debug/wxadoc/dev/component/audio.html

本次將通過小程序audio的 poster、name、author、src、id、controls 屬性，以及 相關api：wx.createAudioContext 的使用，來制作一個簡單的微信小程序音頻播放控制頁面

步驟一 打開微信開發者工具，創建微信小程序項目，選擇新建的空白文件夾即可，工具為自動為你生成微信小程序必要文件！接著在 pages 下創建一個文件夾命名 audio

步驟二

接著打開微信小程序的 app.json，如下圖添加 "pages/audio/audio", 寫入該頁面路徑，確保能夠訪問。寫入之後，audio文件會生成js/json/wxml等空白配置文件。這是最基本的操作啦！

步驟三 直接貼出代碼了，audio.json 默認即可 audio.js (audio腳本文件)

 // audio.js  

Page({  
  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‘,  
  },  
  onReady: function (e) {  
    // 使用 wx.createAudioContext 獲取 audio 上下文 context  
 

this.audioCtx = wx.createAudioContext(‘myAudio‘)  
  },  
  audioPlay: function () {  
    this.audioCtx.play()  
  },  
  audioPause: function () {  
    this.audioCtx.pause()  
  },  
  audio14: function () {  
    this.audioCtx.seek(14)  
  },  
  audioStart: function () {  
    this.audioCtx.seek(0)  
  }  
})  

audio.wxml(audio頁面結構文件)

1. <!-- audio.wxml -->  
   <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls></audio>  
      
   <button class="button-style" bindtap="audioPlay">播放</button>  
   <button class="button-style" bindtap="audioPause">暫停</button>  
   <button class="button-style" bindtap="audio14">設置當前播放時間為14秒</button>  
   <button class="button-style" bindtap="audioStart">回到開頭</button>

audio.wxss(audio頁面樣式文件)

/* pages/audio/aduio.wxss */  
.button-style{   
    background-color: #eee;    
    border-radius: 8rpx;    
    margin: 20rpx;    
}  

微信小程序audio音頻播放的效果： 更多微信小程序開發可以關註我的博客：http://www.cnblogs.com/lanshu/

開發 | 微信小程序audio音頻播放組件+api_wx.createAudioContext