微信小程序 Audio API详解及实例代码


Posted in Javascript onSeptember 30, 2016

微信小程序 Audio API详解及实例代码

没啥可值得太注意的地方

重要属性:

1. wx.getBackgroundAudioPlayerState(object) 获取播放状态

微信小程序 Audio API详解及实例代码

2.wx.playBackgroundAudio(object)播放音乐

微信小程序 Audio API详解及实例代码

3.wx.pauseBackgroundAudio()暂停音乐

4.wx.seekBackgroundAudio(object) 设置播放进度

微信小程序 Audio API详解及实例代码

5.wx.stopBackgroundAudio()停止播放音乐

三个监听器:

微信小程序 Audio API详解及实例代码

wxml

<button type="primary" bindtap="listenerButtonPlay">播放</button>
<button type="primary" bindtap="listenerButtonPause">暂停</button>
<button type="primary" bindtap="listenerButtonSeek">设置播放进度</button>
<button type="primary" bindtap="listenerButtonStop">停止播放</button>
<button type="primary" bindtap="listenerButtonGetPlayState">获取播放状态</button>

js

Page({
 data:{
  // text:"这是一个页面"
 },

 listenerButtonPlay: function() {
   wx.playBackgroundAudio({
     //播放地址
     dataUrl: 'http://sc1.111ttt.com/2016/1/09/28/202280605509.mp3',
     //title 音乐名字
     title: '青云志',
     //图片地址
     coverImgUrl: 'http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7'

   })
 },

 /**
  * 播放状态
  */
 listenerButtonGetPlayState: function() {
   wx.getBackgroundAudioPlayerState({
     success: function(res) {
       console.log(res)
       //duration 总时长
       //currentPosition 当前播放位置
       //status 播放状态
       //downloadPercent 下载状况 100 即为100%
       //dataUrl 当前播放音乐地址
     }
   })
 },
 /**
  * 监听button暂停按钮
  */
 listenerButtonPause: function() {
   wx.pauseBackgroundAudio();
 },
 /**
  * 设置进度
  */
 listenerButtonSeek: function() {
   wx.seekBackgroundAudio({
     position: 30
   })
 },
 /**
  *停止播放 
  */
 listenerButtonStop: function() {
   wx.stopBackgroundAudio()
 },

 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
  /**
   * 监听音乐播放
   */
  wx.onBackgroundAudioPlay(function() {
    console.log('onBackgroundAudioPlay')
  })

  /**
   * 监听音乐暂停
   */
  wx.onBackgroundAudioPause(function() {
    console.log('onBackgroundAudioPause')
  })

  /**
   * 监听音乐停止
   */
  wx.onBackgroundAudioStop(function() {
    console.log('onBackgroundAudioStop')
  })

 },
 onReady:function(){
  // 页面渲染完成
 },
 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 }
})

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

Javascript 相关文章推荐
JavaScript prototype属性使用说明
May 13 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
JS制作简易计算器的实例代码
Jul 04 Javascript
JavaScript实现商品评价五星好评
Nov 30 Javascript
微信小程序 Record API详解及实例代码
Sep 30 #Javascript
微信小程序 Image API实例详解
Sep 30 #Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 #Javascript
JavaScript 链式结构序列化详解
Sep 30 #Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 #Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 #Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 #Javascript
You might like
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
javascript 快速排序函数代码
2012/05/30 Javascript
JS定时器实例
2013/04/17 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
ionic3 懒加载
2017/08/16 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
Python实现类继承实例
2014/07/04 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python AES加密模块用法分析
2017/05/22 Python
python中利用h5py模块读取h5文件中的主键方法
2018/06/05 Python
使用python3构建文件传输的方法
2019/02/13 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python+OpenCV实现图像拼接
2020/03/05 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
static函数与普通函数有什么区别
2015/12/25 面试题
专业毕业生个性的自我评价
2013/10/03 职场文书
实习单位接收函
2014/01/11 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
商业融资计划书
2014/04/29 职场文书
市场营销专业自荐书
2014/06/10 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
单位推荐信范文
2015/03/27 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
搞笑结婚保证书
2015/05/08 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书