微信小程序 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 相关文章推荐
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
checkbox勾选判断代码分析
Jun 11 Javascript
JS扩展方法实例分析
Apr 15 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
javascript实现随机生成DIV背景色
Jun 20 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
php实现递归的三种基本方式
2020/07/04 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
jfinal与bootstrap的登录跳转实战演习
2015/09/22 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
python实现ID3决策树算法
2018/08/29 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
使用python实现画AR模型时序图
2019/11/20 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Python实现序列化及csv文件读取
2020/01/19 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
最新会计专业求职信范文
2014/01/28 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
中学生思想品德评语
2014/12/31 职场文书
董事长岗位职责
2015/02/13 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Redis集群的关闭与重启操作
2021/07/07 Redis