微信小程序  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 相关文章推荐
Array.prototype 的泛型应用分析
Apr 30 Javascript
js 实现菜单左右滚动显示示例介绍
Nov 21 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
May 05 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
vue component组件使用方法详解
Jul 14 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 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按百分比生成缩略图的代码分享
2014/05/10 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
利用JS提交表单的几种方法和验证(必看篇)
2016/09/17 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
python根据京东商品url获取产品价格
2015/08/09 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
python将文本分每两行一组并保存到文件
2018/03/19 Python
在python3中实现更新界面
2020/02/21 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
python新手学习可变和不可变对象
2020/06/11 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
求职信范文怎么写
2014/01/29 职场文书
销售个人求职信范文
2014/04/28 职场文书
火灾现场处置方案
2014/05/28 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
普通党员个人整改措施
2014/10/27 职场文书
典型事迹材料范文
2014/12/29 职场文书
上课迟到检讨书
2015/05/06 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript