微信小程序开发—audio音频播放

一.知识点

（1）.audio为音频组件，我们可以轻松的在小程序中播放音频。

整理下就是：

（2）.API

1.wx.createAudioContext(audioId):创建并返回 audio 上下文 audioContext 对象

 audioContext:audioContext 通过 audioId 跟一个 <audio/> 组件绑定，通过它可以操作对应的 <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">设置当前播放时间为14秒</button>
7. <button type="primary" bindtap="audioStart">回到开头</button>

2.js

1. [html] view plain copy 在CODE上查看代码片派生到我的代码片
2. //获取应用实例
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. })