小程序教程

微信小程序把玩（三十四）Audio API

字号+ 作者： 来源： 2016-11-23 09:49 我要评论( )

没啥可值得太注意的地方

重要属性：

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

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

3.wx.pauseBackgroundAudio()暂停音乐4.wx.seekBackgroundAudio(object) 设置播放进度

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

三个监听器：

wxml

  1. <button type="primary" bindtap="listenerButtonPlay">播放</button>
  2. <button type="primary" bindtap="listenerButtonPause">暂停</button>
  3. <button type="primary" bindtap="listenerButtonSeek">设置播放进度</button>
  4. <button type="primary" bindtap="listenerButtonStop">停止播放</button>
  5. <button type="primary" bindtap="listenerButtonGetPlayState">获取播放状态</button>
复制代码

js

  1. Page({
  2.   data:{
  3.     // text:"这是一个页面"
  4.   },

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

  15.       })
  16.   },

  18.   /**
  19.    * 播放状态
  20.    */
  21.   listenerButtonGetPlayState: function() {
  22.       wx.getBackgroundAudioPlayerState({
  23.           success: function(res) {
  24.               console.log(res)
  25.               //duration 总时长
  26.               //currentPosition 当前播放位置
  27.               //status 播放状态
  28.               //downloadPercent 下载状况 100 即为100%
  29.               //dataUrl 当前播放音乐地址
  30.           }
  31.       })
  32.   },
  33.   /**
  34.    * 监听button暂停按钮
  35.    */
  36.   listenerButtonPause: function() {
  37.       wx.pauseBackgroundAudio();
  38.   },
  39.   /**
  40.    * 设置进度
  41.    */
  42.   listenerButtonSeek: function() {
  43.       wx.seekBackgroundAudio({
  44.           position: 30
  45.       })
  46.   },
  47.   /**
  48.    *停止播放
  49.    */
  50.   listenerButtonStop: function() {
  51.       wx.stopBackgroundAudio()
  52.   },

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

  63.     /**
  64.      * 监听音乐暂停
  65.      */
  66.     wx.onBackgroundAudioPause(function() {
  67.         console.log('onBackgroundAudioPause')
  68.     })

  70.     /**
  71.      * 监听音乐停止
  72.      */
  73.     wx.onBackgroundAudioStop(function() {
  74.         console.log('onBackgroundAudioStop')
  75.     })

  77.   },
  78.   onReady:function(){
  79.     // 页面渲染完成
  80.   },
  81.   onShow:function(){
  82.     // 页面显示
  83.   },
  84.   onHide:function(){
  85.     // 页面隐藏
  86.   },
  87.   onUnload:function(){
  88.     // 页面关闭
  89.   }
  90. })
复制代码


　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评
精彩导读
2-HelloWorld微信小程序

2-HelloWorld微信小程序

微信小程序 轮播图 swiper图片组件

微信小程序 轮播图 swiper图片组件

微信小程序开发记账应用实战服务端之用户注册与登录

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序倒计时组件

微信小程序实现购物车页面

微信小程序实现购物车页面

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习