如何在小程序中实现音频播放

如何在小程序中实现音频播放

如何使用小程序媒体组件这篇文章中,我们介绍了小程序媒体组件的使用,但是对音频组件部分讲的不够详细,本文将对音频部分做些补充。

在教程开始之前,需要搭建搭建好小程序的基础开发环境,关于如何配置,大家可以参考如何入门小程序开发这篇文章的入门教程。

音频组件的使用

音频组件使用较为简单,在index.wxml文件中撰写调用audio组件即可。

<audio controls src="https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3"></audio>

有前端开发经验的小伙伴肯定能看懂,src中是我们要播放音频的地址,那么controls是什么意思呢?我们先看看官方的文档吧,如下表。

属性名

类型

默认值

说明

id

String

audio 组件的唯一标识符

src

String

要播放音频的资源地址

loop

Boolean

false

是否循环播放

controls

Boolean

false

是否显示默认控件

poster

String

默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效

name

String

未知音频

默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效

author

String

未知作者

默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效

binderror

EventHandle

当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}

bindplay

EventHandle

当开始/继续播放时触发play事件

bindpause

EventHandle

当暂停播放时触发 pause 事件

bindtimeupdate

EventHandle

当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}

bindended

EventHandle

当播放到末尾时触发 ended 事件

原来,controls的意思是是否显示默认控件,默认值是不显示的,当我们写出controls才会显示播放的控件。当然,我们还可以为当前控件加入其它属性。

<audio controls src="https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3" poster="http://i1.hdslb.com/bfs/archive/89252dadd2525f8190485a069f73cdf3d783cabc.jpg" name="普通disco" author="洛天依/言和"></audio>

我们增加了音乐名称和作者,并给该音频配置了封面。为了优化代码,我们可以这样写。首先修改index.wxml文件如下。

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" controls></audio>

之后,我们将音频数据存储在index.js目录下,将下面的代码放在data{}之间。

poster: 'http://i1.hdslb.com/bfs/archive/89252dadd2525f8190485a069f73cdf3d783cabc.jpg',
name: '普通disco',
author: '洛天依/言和',
src: 'https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3',

这时,我们就做到了前后端数据分离,后续可以实现更多功能,比如可以通过后端实现下一曲的功能。

index.wxml

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" controls></audio>
<button bindtap='next'>下一曲</button>

index.js

  data: {
      poster: 'http://i1.hdslb.com/bfs/archive/89252dadd2525f8190485a069f73cdf3d783cabc.jpg',
      name: '普通disco',
      author: '洛天依/言和',
      src: 'https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3',
  },
next(){
  var i = 0;
  var array = [{
    poster: 'http://i1.hdslb.com/bfs/archive/89252dadd2525f8190485a069f73cdf3d783cabc.jpg',
    name: '普通disco',
    author: '洛天依/言和',
    src: 'https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3',
  },
  {
    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',
  }]
  i++
  this.setData({
    poster: array[i].poster,
    name: array[i].name,
    author: array[i].author,
    src: array[i].src
  })
},

这时,当我们点击下一曲按钮时,会执行next()函数,自动更换posternameauthorsrc等数据。

音频API - AudioContext的使用

我们已经学会了音频组件的基本调用步骤,控制音频暂停,播放,转跳等功能需要相关API的支持,接下来,我们就看看如何使用API来实现这些功能。

音频播放暂停、播放等功能需要AudioContext接口,在使用该接口之前,需要使用wx.createAudioContext()创建对象。创建完对象后,我们使用播放音频方法AudioContext.play()暂停音频方法AudioContext.pause()跳转到指定位置方法AudioContext.seek(number position)来控制当前音频。

wx.createAudioContext()需要指定当前组件的ID才能使用,所以我们修改index.wxml内容如下。

<audio id="Audio" poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" controls ></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>

这里id内的内容可随意指定,但需要记录其内容。接下来,我们在index.js文件的page()中,写出下面的代码。

  data: {
      poster: 'http://i1.hdslb.com/bfs/archive/89252dadd2525f8190485a069f73cdf3d783cabc.jpg',
      name: '普通disco',
      author: '洛天依/言和',
      src: 'https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3',
  },
  audioPlay() {
    this.audioCtx.play()
  },
  audioPause() {
    this.audioCtx.pause()
  },
  audio14() {
    this.audioCtx.seek(14)
  },
  audioStart() {
    this.audioCtx.seek(0)
  },
  onReady: function () {
    this.audioCtx = wx.createAudioContext('Audio')
  },

这段代码中,我们指定了默认的音乐数据,存放在data()中,然后创建audioPlayaudioPause()audio14()audioStart()四个函数,来控制当前音乐,在onReady函数中,我们指定了当前音频的ID。

音频API - InnerAudioContext的使用

新版的小程序中,官方推荐使用InnerAudioContext接口来替代AudioContext接口,并且后续AudioContext将不再维护。同时<audio>组件也不在维护,我们需要自己去写代码去实现前端展示功能。

InnerAudioContext接口使用和AudioContext比较接近,在调用前,我们不需要指定相关ID。我们可以使用下面的代码来实现基本的播放功能。

index.js

  data: {
    status:"等待播放"
  },
  audioPlay() {
    const innerAudioContext = wx.createInnerAudioContext()
    innerAudioContext.autoplay = true
    innerAudioContext.src = 'https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3'
    innerAudioContext.onPlay(() => {
      this.setData({
        status: "正在播放"
      })
    })
  },

index.wxml

<button type="primary" bindtap="audioPlay">播放</button>
<text>当前状态:{{status}}</text>

InnerAudioContext接口参数较多,官方文档写的比较粗糙,为了看起来易懂,我将其做成表格。

属性名

类型

默认值

说明

src

string

音频资源的地址,用于直接播放。2.2.3 开始支持云文件ID

startTime

number

0

开始播放的位置(单位:s),默认为 0

autoplay

boolean

false

是否自动开始播放,默认为 false

loop

boolean

false

是否循环播放,默认为 false

obeyMuteSwitch

boolean

true

是否遵循系统静音开关,默认为 true。当此参数为 false 时,即使用户打开了静音开关,也能继续发出声音

volume

number

1

音量。范围 0~1。默认为 1

duration

number

当前音频的长度(单位 s)。只有在当前有合法的 src 时返回(只读)

currentTime

number

当前音频的播放位置(单位 s)。只有在当前有合法的 src 时返回,时间保留小数点后 6 位(只读)

paused

boolean

当前是是否暂停或停止状态(只读)

buffered

number

音频缓冲的时间点,仅保证当前播放时间点到此时间点内容已缓冲(只读)

同样,也给出了若干接口,本文只列出几个常用的接口,其他接口使用请见官方文档

接口

说明

InnerAudioContext.play()

播放

InnerAudioContext.pause()

暂停。暂停后的音频再播放会从暂停处开始播放

InnerAudioContext.stop()

停止。停止后的音频再播放会从头开始播放。

InnerAudioContext.seek(number position)

跳转到指定位置

参考上表,我们可以为我们的小程序增加暂停功能,修改代码如下。

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<text>当前状态:{{status}}</text>

接下来,我们优化下index.js文件代码。

Page({
  data: {
    status:"等待播放"
  },
  audioStatus(){
  },
  audioPlay() {
    this.innerAudioContext.play()
    this.innerAudioContext.onPlay(() => {
      this.setData({
        status: "正在播放"
      })
    })
  },
  audioPause(){
    this.innerAudioContext.pause()
    this.innerAudioContext.onPause(() => {
      this.setData({
        status: "暂停"
      })
    })
  },
  onReady: function () {
    this.innerAudioContext = wx.createInnerAudioContext()
    this.innerAudioContext.src = 'https://qcloudbbs-10019892.cos.ap-shanghai.myqcloud.com/%E6%99%AE%E9%80%9ADisco%20-%20%E6%B4%9B%E5%A4%A9%E4%BE%9D%20_%20%E8%A8%80%E5%92%8C.mp3'
  },
})

总结

现在,你学会使用音频组件及API的使用了吗?关于API推荐使用InnerAudioContext,根据官方说明音频组件和AudioContext将不再更新。后续我将会对其他组件做详细的介绍。喜欢的小伙伴请持续关注本专栏。腾讯云联合小程序给大家带来了小程序·云开发解决方案,为开发者提供完整的云端支持,弱化后端和运维操作,使用平台原生 API 进行核心业务开发,实现快速上线和迭代。欢迎免费使用!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏抠抠空间

Font Awesome矢量图标框架

一、font awesome简介 目前图标总数共有519个; 不依赖Javascript 矢量图形,无限缩放 免费,可用于商业 CSS...

2986
来自专栏极乐技术社区

『教程』微信小程序--图片相关问题合辑

最近有注意到,很多同学在社区求助图片上传、加载、效果处理等相关的问题,这期专程做这样一个汇总供大家学习参考。 图片上传相关文章 微信小程序多张图片上传功能 微信...

99110
来自专栏coding for love

CSS入门11-定位与覆盖

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

1162
来自专栏用户2442861的专栏

chrome使用技巧(看了定不让你失望,不错)

之前有看过刘哇勇写的Chrome 控制台不完全指南,让我觉得瞬间对chrome的了解实在太浅了。对此特意了解了一番(也就是在他的博文上进行了一些总结和了解一些其...

1271
来自专栏Material Design组件

Human Interface Guidelines —— Text Views & Web Views

883
来自专栏hrscy

怎样在 Unity 中创建 UI

在现在每一个软件应用中,用户界面(UI)都是核心的特征。游戏也没有抛弃这一规则。有非常多的游戏都使用 UI 来显示一些信息,比如生命值,技能,地图,武器的弹药,...

2062
来自专栏HTML5学堂

网络字体@font-face 如何处理网页中的特殊字体

HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑、宋体、黑体已经越来越难以满足设计的需要,那么,如何在网站中使用比较特殊的字体...

4525
来自专栏守候书阁

vue组件开发练习--焦点图切换

vue用了有一段时间了,开发的后台管理系统也趋于完善,现在时间比较算是有点空闲吧!这个空闲时间我在研究vue的另外的一些玩法,比如组件,插件等。今天,我就分享一...

2051
来自专栏MixLab科技+设计实验室

DIY一个Sketch插件,生成猫猫狗狗的全家福

最近朋友圈都在玩的全家福: ? 看了下是使用 cocos2D 引擎制作的, http://www.cocos.com/creator 主要是图片合成,利用前端...

3097
来自专栏安富莱嵌入式技术分享

emWin洗衣机简易操作界面,含uCOS-III和FreeRTOS两个版本

配套例子: V6-904_STemWin提高篇实验_洗衣机简易操作界面(uCOS-III) V6-905_STemWin提高篇实验_洗衣机简易操作界面(Fre...

2145

扫码关注云+社区