微信小程序  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 相关文章推荐
jQuery中detach()方法用法实例
Dec 25 Javascript
jQuery中:nth-child选择器用法实例
Dec 31 Javascript
浅谈js中变量初始化
Feb 03 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
jQuery.Validate表单验证插件的使用示例详解
Jan 04 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
如何使用vue3打造一个物料库
May 08 Vue.js
微信小程序 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
一个用于网络的工具函数库
2006/10/09 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
深入解析PHP内存管理之谁动了我的内存
2013/06/20 PHP
php操作mysql数据库的基本类代码
2014/02/25 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
Yii2.0 模态弹出框+ajax提交表单
2016/05/22 PHP
PHP实现自动识别原编码并对字符串进行编码转换的方法
2016/07/13 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
jquery实现带二级菜单的导航示例
2014/04/28 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
浅谈Angular中ngModel的$render
2016/10/24 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
js面向对象编程总结
2017/02/16 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
python列表去重的二种方法
2014/02/14 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
利用Python批量生成任意尺寸的图片
2016/08/29 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
2018/02/06 HTML / CSS
爱淘宝:淘宝网购物分享平台
2017/04/28 全球购物
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
什么是组件架构
2016/05/15 面试题
家长对孩子评语
2014/01/30 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
Spring中bean集合注入的方法详解
2022/07/07 Java/Android