微信小程序 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 相关文章推荐
js获取class的所有元素
Mar 28 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
js简单抽奖代码
Jan 16 Javascript
JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例
Mar 04 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
react项目从新建到部署的实现示例
Feb 19 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 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多层数组与对象的转换实例代码
2013/08/05 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
JavaScript 原型与继承说明
2010/06/09 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
5个javascript的数字格式化函数分享
2011/12/07 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
javascript时间函数大全
2014/06/30 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
漂亮实用的页面loading(加载)封装代码
2017/02/03 Javascript
详解node中创建服务进程
2017/05/09 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
js基于canvas实现时钟组件
2021/02/07 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
python中模块的__all__属性详解
2017/10/26 Python
Python实现通讯录功能
2018/02/22 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
numpy.random.shuffle打乱顺序函数的实现
2019/09/10 Python
python爬取招聘要求等信息实例
2020/11/20 Python
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
心理咨询承诺书
2014/05/20 职场文书
先进个人自荐书
2015/03/06 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
预备党员表决心的话
2015/09/22 职场文书