欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2017-12-12 17:26浏览: 来源:网络 作者:tianshu

微信小程序开发—audio音频播放功能实现。

 
 
 

微信小程序开发—audio音频播放(图1)

 

一.知识点

(1).audio为音频组件,我们可以轻松的在小程序中播放音频。

微信小程序开发—audio音频播放(图2)

整理下就是:

微信小程序开发—audio音频播放(图3)

(2).API

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

 audioContext:audioContext 通过 audioId 跟一个 <audio/> 组件绑定,通过它可以操作对应的 <audio/> 组件。

微信小程序开发—audio音频播放(图4)

二.操作

 

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: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
  11. name: 'Sugar',
  12. author: 'Maroon 5',
  13. src: 'https://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. })





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。