微信小程序  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 each函数的链式调用
Jul 22 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
jQuery根据表单name获取值的方法
May 24 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 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
输出控制类
2006/10/09 PHP
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
信用卡效验程序
2006/10/09 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
Linux中为php配置伪静态
2014/12/17 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
python中的多重继承实例讲解
2014/09/28 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
python实现机器人行走效果
2018/01/29 Python
Python中logging实例讲解
2019/01/17 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
使用Django搭建网站实现商品分页功能
2020/05/22 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
PHP高级工程师面试问题推荐
2013/01/18 面试题
技术人员面试提纲
2013/11/28 职场文书
银行职员思想汇报
2013/12/31 职场文书
新学期家长寄语
2014/01/19 职场文书
电脑饰品店的创业计划书
2014/01/21 职场文书
大学生自我鉴定书
2014/03/24 职场文书
法制教育演讲稿
2014/09/10 职场文书
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript
python创建字典及相关管理操作
2022/04/13 Python