audio音频

本文编辑： Owen Owen浏览 3934 版权所有，严禁转载

组件说明:

  • audio为音频组件，我们可以轻松的在小程序中播放音频

组件用法：

wxml

<!-- audio.wxml -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>

js

// audio.js
Page({
  onReady: function (e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio')
  },
  data: {
    poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',
    name: '此时此刻',
    author: '许巍',
    src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
  },
audioPlay: function () {
    this.audioCtx.play()
  },
  audioPause: function () {
    this.audioCtx.pause()
    console.log("audioPause");
  },
  audio14: function () {
    this.audioCtx.seek(14)
    console.log("跳至第14秒播放");
  },
  audioStart: function () {
    this.audioCtx.seek(0)
    console.log("回到开头")
  },

})

主要属性：

  • 设置音频组件的内容，用于wxml
属性 类型 说明
id String video 组件的唯一标识符
src String 要播放音频的资源地址
loop Boolean 是否循环播放
controls Boolean 是否显示默认控件
poster String 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
name String 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
author String 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
  • 监听音频播放的事件，用于js
属性 类型 说明
binderror EventHandle 当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
bindplay EventHandle 当开始/继续播放时触发play事件
bindpause EventHandle 当暂停播放时触发 pause 事件
bindtimeupdate EventHandle 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
bindended EventHandle 当播放到末尾时触发 ended 事件
如有技术问题或对本文有反馈，请加入QQ群：
微信小程序实战5营： 微信小程序Club实战5营