微信小程序 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库(迷你版)--自建js库总结
Nov 21 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
浅谈angular2路由预加载策略
Oct 04 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
Vue封装的组件全局注册并引用
Jul 24 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 特殊字符处理函数
2008/09/05 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
js判断当前页面在移动设备还是在PC端中打开
2016/01/06 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
大学自荐信
2013/12/12 职场文书
八年级英语教学反思
2014/01/09 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
投资入股合作协议书
2014/10/28 职场文书
后勤工作个人总结
2015/02/28 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
2015年财政局工作总结
2015/05/21 职场文书
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python