小程序教程

微信小程序把玩(三十四)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.   },

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

  13.       })
  14.   },

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

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

  58.     /**
  59.      * 监听音乐暂停
  60.      */
  61.     wx.onBackgroundAudioPause(function() {
  62.         console.log('onBackgroundAudioPause')
  63.     })

  64.     /**
  65.      * 监听音乐停止
  66.      */
  67.     wx.onBackgroundAudioStop(function() {
  68.         console.log('onBackgroundAudioStop')
  69.     })

  70.   },
  71.   onReady:function(){
  72.     // 页面渲染完成
  73.   },
  74.   onShow:function(){
  75.     // 页面显示
  76.   },
  77.   onHide:function(){
  78.     // 页面隐藏
  79.   },
  80.   onUnload:function(){
  81.     // 页面关闭
  82.   }
  83. })
复制代码


 

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

网友点评