微信小程序  audio音频播放详解及实例


Posted in Javascript onNovember 02, 2016

 微信小程序 audio音频播放

audio

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

属性名 类型 默认值 说明
id String   video 组件的唯一标识符,
src String   要播放音频的资源地址
loop Boolean false 是否循环播放
controls Boolean true 是否显示默认控件
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 事件

错误返回码:MediaError.code

返回错误码 描述

返回错误码 描述
MEDIA_ERR_ABORTED 获取资源被用户禁止
MEDIA_ERR_NETWORD 网络错误
MEDIA_ERR_DECODE 解码错误
MEDIA_ERR_SRC_NOT_SUPPOERTED 不合适资源

wx.createAudioContext(audioId)

创建并返回audio上下文audioContext对象,控制音频的播放暂停与跳转。

方法 参数 说明
play 播放
pause 暂停
seek position 跳转到指定位置,单位 s

wxml

<!-- 
  poster:音频封面图片
  name:歌名
  author:歌手
  src:音频地址
  controls:是否显示默认控件,也就是下面这个东东
                       
  loop:是否循环播放
  id:标注唯一组件以this.audioCtx = wx.createAudioContext('myAudio')获取控制组件的对象。
  bindplay:播放时触发该事件
  bindpause:停止时触发该事件
  bindtimeupdate:时间改变时触发,该函数携带有参数detail={currentTime, duration}当前时间,持续播放时间
  bindended:播放结束时触发
  binderror;播放错误时调用,携带参数detail = {errMsg: MediaError.code}

 -->
<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop bindplay="funplay" bindpause="funpause" bindtimeupdate="funtimeupdate" bindended="funended" binderror="funerror"></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

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()
 },
 audio14: function () {
  this.audioCtx.seek(14)
 },
 audioStart: function () {
  this.audioCtx.seek(0)
 },
 funplay: function(){
   console.log("audio play");
 },
 funpause: function(){
   console.log("audio pause");
 },
 funtimeupdate: function(u){
   console.log(u.detail.currentTime);
   console.log(u.detail.duration);
 },
 funended: function(){
   console.log("audio end");
 },
 funerror: function(u){
   console.log(u.detail.errMsg);
 }
})

效果

 微信小程序  audio音频播放详解及实例

 今天早上发现微信小程序的官方文档在实时跟新,之前的有些标签或者方法不见了。以上是控制audio组件的方法是根据组件的唯一id生成相应的实例对象,通过对象的各种发放来控制组件。我现在看到的官方文档是通过有个action属性,给属性指定特定的值组件就会执行特定的动作。

method 描述 data
play 播放  
pause 暂停  
setPlaybackRate 调整速度 倍速
setCurrentTime 设置当前时间 播放时间

.wxml

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="http://qqma.tingge123.com:823/mp3/2015-06-13/1434188181.mp3" action="{{action}}" controls loop></audio>

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audioPlaybackRateSpeedUp">调为2倍速</button>
<button type="primary" bindtap="audioPlaybackRateNormal">调为1倍速</button>
<button type="primary" bindtap="audioPlaybackRateSlowDown">调为0.5倍速</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>

.js

Page({
 data: {
  poster: 'http://pic.pimg.tw/pam86591/1408719752-3322564110_n.jpg',
  name: 'Sugar',
  author: 'Maroon 5'
 },
 audioPlay: function () {
  this.setData({
   action: {
    method: 'play'
   }
  });
 },
 audioPause: function () {
  this.setData({
   action: {
    method: 'pause'
   }
  });
 },
 audioPlaybackRateSpeedUp: function () {
  this.setData({
   action: {
    method: 'setPlaybackRate',
    data: 2//加快速度
   }
  });
 },
 audioPlaybackRateSlowDown: function () {
  this.setData({
   action: {
    method: 'setPlaybackRate',
    data: 0.5//小于零放慢速度
   }
  });
 },
 audio14: function () {
  this.setData({
   action: {
    method: 'setCurrentTime',
    data: 14
   }
  });
 },
 audioStart: function () {
  this.setData({
   action: {
    method: 'setCurrentTime',
    data: 0
   }
  });
 }
})

效果

微信小程序  audio音频播放详解及实例
 

上一种方法好像没有不能控制播放速度,这种方法相比上一种比较方便,并且效率上应该也比较高。

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
jQuery 联动日历实现代码
May 31 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
子窗体与父窗体传值示例js代码
Aug 01 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
javascript每日必学之继承
Feb 23 Javascript
bootstrap select插件封装成Vue2.0组件
Apr 17 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
Postman无法正常返回结果问题解决
Aug 28 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 #Javascript
bootstrap基础知识学习笔记
Nov 02 #Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 #Javascript
Bootstrap table的使用方法
Nov 02 #Javascript
AngularJS指令用法详解
Nov 02 #Javascript
AngularJS表单和输入验证实例
Nov 02 #Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 #Javascript
You might like
php中return的用法实例分析
2015/02/28 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP中把数据库查询结果输出为json格式简单实例
2015/04/09 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
js的hasownproperty使用示例
2014/03/02 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
python的即时标记项目练习笔记
2014/09/18 Python
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
django使用channels实现通信的示例
2020/10/19 Python
Python实现粒子群算法的示例
2021/02/14 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
香港交友网站:be2香港
2018/07/22 全球购物
东方红海科技面试题软件测试方面
2012/02/08 面试题
软件缺陷的分类都有哪些
2014/08/22 面试题
甜美蛋糕店创业计划书
2014/01/30 职场文书
货车司机岗位职责
2014/03/18 职场文书
大三学习计划书范文
2014/05/02 职场文书
会议简讯范文
2015/07/20 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android