小程序模板网

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

发布时间:2017-12-12 17:26 所属栏目:小程序开发教程

微信小程序开发—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. })


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18137.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询