# 小程序播放音樂 ## 舊版本（不久會淘汰）：wx.playBackgroundAudio(Object object) 必填屬性有：dataUrl，為音樂鏈接 選填屬性有： | 參數 | 類型 | 說明 | |---|---|---| | title | string | 音樂標題 | | coverImgUrl | string | 封面URL | | success | function | 接口調用成功的回調函數 | | fail | function | 接口調用失敗的回調函數 | | complete | function | 接口調用結束的回調函數（調用成功、失敗都會執行） | 1. 在.wxml內寫入按鈕，點擊播放音樂 ~~~ // 點擊事件觸發，播放音樂 ~~~ ~~~ <button bindtap='click'>Paris</button> Page({ click() { wx.playBackgroundAudio({ dataUrl: this.data.url, title:'Paris' }) }, ~~~ # 新版本 wx.getBackgroundAudioManager ## 詳細api點擊[鏈接](https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html) ### 1.屬性 | 參數 | 類型 | 說明 | |---|---|---| | src|string |默認為空字符串，當設置了新的 src 時，會自動開始播放 | |startTime | number| 音頻開始播放的位置（單位：s）。| |title |string |音頻標題，用于原生音頻播放器音頻標題（必填）。 | |epname |string | 專輯名，原生音頻播放器中的分享功能，分享出去的卡片簡介，也將使用該值。| | singer| string |歌手名 | | coverImgUrl| string |封面圖 URL，用于做原生音頻播放器背景圖。 | | webUrl| string |頁面鏈接，原生音頻播放器中的分享功能，分享出去的卡片簡介，也將使用該值。 | | protocol|string |音頻協議 | |duration |number | 當前音頻的長度（單位：s），只有在有合法 src 時返回。（只讀）| |currentTime | number | 當前音頻的播放位置（單位：s），只有在有合法 src 時返回。（只讀）| |paused |boolean |當前是否暫停或停止。（只讀） | | buffered| number |音頻已緩沖的時間，僅保證當前播放時間點到此時間點內容已緩沖。（只讀） | > **在寫音樂播放函數時，src和title必須都寫，并放在一起才能進行播放** ~~~ var audio = wx.getBackgroundAudioManager(); // playMusic() 函數是自定義函數 playMusic(){ audio.title = "title"; audio.src = "src"; } audio.onPlay(){} audio.onPause(){} audio.onStop(){} ~~~ ## **音樂播放組件demo** 使用前提：該組件需要從父組件傳遞兩條數據（title和url）來支持音樂播放 ~~~ /* music.js */ const audio = wx.getBackgroundAudioManager(); Component({ /** * 組件的屬性列表 */ properties: { //在外面的musci.wxml中會用到，所以需要定義。 title: String, url: String }, /** * 組件的初始數據 */ data: { //一開始是停止播放 isPlay: false }, /** * 組件的方法列表 */ methods: { onMusic() { if (this.data.isPlay) { this.setData({ isPlay: false }) audio.pause(); } else { audio.title = this.properties.title; audio.src = this.properties.url; this.setData({ isPlay: true }) } } }, attached(){ //點播放，開始 audio.onPlay(()=>{ this.setData({ isPlay:true }) }) //點暫停，不播放 audio.onPause(()=>{ this.setData({ isPlay:false }) }) //關掉的時候，不播放 audio.onStop(()=>{ this.setData({ isPlay:false }) }) //歌曲放完的時候，自動停止 audio.onEnded(()=>{ this.setData({ isPlay:false }) }) } }) ~~~ ~~~ /* music.wxml */ <view class="music"> <image class="pictrue {{isPlay?'rotate':''}}" src="../../images/banner.png" mode="" ></image> //判斷圖片是否播放，播放的時候需要旋轉！ <image class="play" src="{{isPlay?'../../images/play.png':'../../images/pause.png'}}" bind:tap="onMusic" ></image> //是否播放，圖標會變化； </view> ~~~ 音樂背景圖片旋轉 ~~~ .rotate{ animation: rotate 19s infinite; } @keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } } ~~~