AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-26 21:05:12

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序开发—audio音频播放
相关的资讯,希望对您有帮助。

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

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


一.知识点

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

整理下就是:

(2).API

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

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

二.操作

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. <button type=primary bindtap=audioPlay>播放button>
  4. <button type=primary bindtap=audioPause>暂停button>
  5. <button type=primary bindtap=audio14>设置当前播放时间为14button>
  6. <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. })

41阅读 | 0评论
你的回应
写文章

8093