AD:靠谱的微信小程序外包开发

admin

admin

发表于 2017-07-26 21:05:10

摘要:微信小程序开发者社区(www.mntuku.cn)为您提供:微信小程序之音乐控制播放(audio的API)
相关的资讯,希望对您有帮助。

微信小程序之音乐控制播放(audio的API)

微信小程序之音乐控制播放(audio的API)

作者:汉堡请不要欺负面条  来源地址:http://blog.csdn.net/gao_xu_520/article/details/72727747


一.小知识

1.wx.getBackgroundAudioPlayerState(OBJECT):获取后台音乐播放状态。

  1. [html] view plain copy
  2. <span style=font-family:Comic Sans MS;>wx.getBackgroundAudioPlayerState({
  3. success: function(res) {
  4. var status = res.status
  5. var dataUrl = res.dataUrl
  6. var currentPosition = res.currentPosition
  7. var duration = res.duration
  8. var downloadPercent = res.downloadPercent
  9. }
  10. })span>

2.wx.playBackgroundAudio(OBJECT)

  1. [html] view plain copy
  2. <span style=font-family:Comic Sans MS;font-size:18px;color:#333333;>wx.playBackgroundAudio({
  3. dataUrl: ,
  4. title: ,
  5. coverImgUrl:
  6. })span>

3.wx.pauseBackgroundAudio()暂停播放音乐。 
4.wx.seekBackgroundAudio(OBJECT)控制音乐播放进度。

  1. [html] view plain copy
  2. <span style=font-family:Comic Sans MS;>wx.seekBackgroundAudio({
  3. position: 30
  4. })span>

5.wx.stopBackgroundAudio()停止播放音乐。 
6.wx.onBackgroundAudioPlay(CALLBACK)监听音乐播放。 
7.wx.onBackgroundAudioPause(CALLBACK)监听音乐暂停。 
8.wx.onBackgroundAudioStop(CALLBACK)监听音乐停止。

二.案例

  1. [html] view plain copy
  2. <span style=font-family:Comic Sans MS;font-size:18px;color:#333333;><view class=zn-uploadimg>
  3. <button type=primary bindtap=listenerButtonPlay>播放button>
  4. <button type=primary bindtap=listenerButtonPause>暂停button>
  5. <button type=primary bindtap=listenerButtonSeek>设置播放进度button>
  6. <button type=primary bindtap=listenerButtonStop>停止播放button>
  7. <button type=primary bindtap=listenerButtonGetPlayState>获取播放状态button>
  8. </view>span>
  1. [html] view plain copy
  2. <span style=font-family:Comic Sans MS;font-size:18px;color:#333333;>.zn-uploadimg{
  3. padding:1rem;
  4. }
  5. .zn-uploadimg button{
  6. margin:10px;
  7. }span>
  1. [html] view plain copy
  2. <span style=font-family:Comic Sans MS;font-size:18px;color:#333333;>//record.js
  3. //获取应用实例
  4. Page({
  5. data:{
  6. // text:这是一个页面
  7. },
  8. onLoad:function(options){
  9. // 页面初始化 options为页面跳转所带来的参数
  10. /**
  11. * 监听音乐播放
  12. */
  13. wx.onBackgroundAudioPlay(function() {
  14. console.log(onBackgroundAudioPlay)
  15. })
  16. /**
  17. * 监听音乐暂停
  18. */
  19. wx.onBackgroundAudioPause(function() {
  20. console.log(onBackgroundAudioPause)
  21. })
  22. /**
  23. * 监听音乐停止
  24. */
  25. wx.onBackgroundAudioStop(function() {
  26. console.log(onBackgroundAudioStop)
  27. })
  28. },//播放音乐
  29. listenerButtonPlay: function() {
  30. wx.playBackgroundAudio({
  31. //播放地址
  32. dataUrl: http://sc1.111ttt.com/2016/1/09/28/202280605509.mp3,
  33. title: 青云志,
  34. //图片地址
  35. coverImgUrl: http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7
  36. })
  37. },
  38. /**
  39. * 播放状态
  40. */
  41. listenerButtonGetPlayState: function() {
  42. wx.getBackgroundAudioPlayerState({
  43. success: function(res) {
  44. console.log(res)
  45. //duration 总时长
  46. //currentPosition 当前播放位置
  47. //status 播放状态
  48. //downloadPercent 下载状况 100 即为100%
  49. //dataUrl 当前播放音乐地址
  50. }
  51. })
  52. },
  53. /**
  54. * 监听button暂停按钮
  55. */
  56. listenerButtonPause: function() {
  57. wx.pauseBackgroundAudio();
  58. },
  59. /**
  60. * 设置进度
  61. */
  62. listenerButtonSeek: function() {
  63. wx.seekBackgroundAudio({
  64. position: 30
  65. })
  66. },
  67. /**
  68. *停止播放
  69. */
  70. listenerButtonStop: function() {
  71. wx.stopBackgroundAudio()
  72. }
  73. })span>


39阅读 | 0评论
你的回应
写文章

8086