小程序模板網(wǎng)

微信小程序開發(fā)—audio音頻播放

發(fā)布時間:2017-12-12 17:26 所屬欄目:小程序開發(fā)教程

微信小程序開發(fā)—audio音頻播放功能實現(xiàn)。

 
 
 

 

一.知識點

(1).audio為音頻組件,我們可以輕松的在小程序中播放音頻。

整理下就是:

(2).API

1.wx.createAudioContext(audioId):創(chuàng)建并返回 audio 上下文 audioContext 對象

 audioContext:audioContext 通過 audioId 跟一個 <audio/> 組件綁定,通過它可以操作對應(yīng)的 <audio/> 組件。

二.操作

 

1.wxml

 

		
  1. [html] view plain copy CODE上查看代碼片派生到我的代碼片
  2. <audio poster="{{poster}}" name="{{name}}" author="{{author}}" action="{{action}}"src="{{src}}" id="myAudio" controls loop></audio>
  3.  
  4. <button type="primary" bindtap="audioPlay">播放</button>
  5. <button type="primary" bindtap="audioPause">暫停</button>
  6. <button type="primary" bindtap="audio14">設(shè)置當前播放時間為14秒</button>
  7. <button type="primary" bindtap="audioStart">回到開頭</button>
 

2.js

 

		
  1. [html] view plain copy CODE上查看代碼片派生到我的代碼片
  2. //獲取應(yīng)用實例
  3. var util = require('../../utils/util.js')
  4. Page({
  5. onReady: function (e) {
  6. // 使用 wx.createAudioContext 獲取 audio 上下文 context
  7. this.audioCtx = wx.createAudioContext('myAudio')
  8. },
  9. data: {
  10. poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
  11. name: 'Sugar',
  12. author: 'Maroon 5',
  13. src: 'http://qqma.tingge123.com:823/mp3/2015-06-13/1434188181.mp3',
  14. },
  15. audioPlay: function () {
  16. this.audioCtx.play()
  17. },
  18. audioPause: function () {
  19. this.audioCtx.pause()
  20. },
  21. audio14: function () {
  22. this.audioCtx.seek(14)
  23. },
  24. audioStart: function () {
  25. this.audioCtx.seek(0)
  26. }
  27. })


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/18137.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢