微信小程序 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 相关文章推荐
一个网马的tips实现分析
Nov 28 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
angularJS 中input示例分享
Feb 09 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 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
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
js点击选择文本的方法
2015/02/09 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
vue 实现微信浮标效果
2019/09/01 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
详解Python当中的字符串和编码
2015/04/25 Python
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
对Python3使运行暂停的方法详解
2019/02/18 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Pytorch之Variable的用法
2019/12/31 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
Python实现数字的格式化输出
2020/08/01 Python
Python如何将模块打包并发布
2020/08/30 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
美国眼镜网:GlassesUSA
2017/09/07 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
幼儿园小班教学反思
2014/02/02 职场文书
婚礼秀策划方案
2014/05/19 职场文书
毕业生政审意见范文
2015/06/04 职场文书
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js