音樂播放 · 微信小程序

[TOC] ### 1. 創建一個音樂實例 ~~~ //創建一個音樂實例（在有播放的js文件中的頂部） const audio =wx.getBackgroundAudioManager(); ~~~ ### 2. wxml 和js文件配置 ~~~ //wxml (點擊觸發播放函數同時改變狀態圖標) //背景圖片改變 <image src="{{isplay?list[0].musiccoverImg:list[0].imgSrc}}"></image> //音樂圖片改變 <image bindtap = "playmusic" src="{{isplay?'/images/music/music-stop.png':'/images/music/music-start.png'}}" class="music"></image> //js data: { isplay:false, }, ~~~ ### 3. 播放音樂函數（重點） ~~~ js文件中 playmusic(){ var url=this.data.list[0].musicurl; // console.log(url) if(this.data.isplay){ wx.stopBackgroundAudio(); // 停止音頻 // audio.onPause(); this.setData({ isplay: false }) }else{ wx.playBackgroundAudio(); //播放音頻 // audio.onPlay(); audio.src=url; this.setData({ isplay: true }) } }, ~~~ ### 4.在app.js創建全局變量接收正在播放頁面的id和圖片的狀態 ~~~ globalData:{ g_isPlay:false, //自定義名字 g_currentId:null // 自定義名字 } ~~~ ### 5. 狀態同步創建監聽函數在onload中調用（此方法已廢棄） ~~~ onMusic() { var self = this; //監聽音樂播放事件（點擊后觸發的事件） wx.onBackgroundAudioPlay((result) => { // console.log(1) this.setData({ isplay: true }); app.globalData.g_isPlay=true; //進入頁面點擊播放將id傳到外部的局部變量中退出當前頁面換一個頁面進入不會觸發該事件其他的點擊事件將數據清空 app.globalData.g_currentId = self.data.list[0].id }); wx.onBackgroundAudioPause((result) => { // console.log(2) this.setData({ isplay: false }) app.globalData.g_isPlay = false; app.globalData.g_currentId = null; }); wx.onBackgroundAudioStop((result)=>{ // console.log(3) self.setData({ isplay: false }); app.globalData.g_currentId = null; }); }, //在onload函數中調用和判斷 this.onMusic(); if(app.globalData.g_isPlay && app.globalData.g_currentId==options.id){ this.setData({ isplay:true }); } ~~~ ### 6. 狀態同步創建監聽函數（新方法常用方法） ~~~ // 音樂暫停監聽(頁面加載時如果音樂為暫停狀態改變音樂的狀態圖標) //當音樂暫停時觸發的函數 audio.onPause(() => { // console.log(1) this.setData({ isplay: false }) app.globalData.g_isPlay = false; app.globalData.g_currentId = null; }); //當音樂結束時觸發的函數 audio.onEnded(() => { // console.log(1) this.setData({ isplay: false }) }); //當音樂停止播放時時觸發的函數 audio.onStop(() => { // console.log(1) this.setData({ isplay: false }) }); // 音樂播放監聽(頁面加載時如果音樂為播放狀態改變音樂的狀態圖標) //當音樂開始播放時觸發的函數 audio.onPlay(() => { // console.log(2) this.setData({ isplay: true }) app.globalData.g_isPlay = true; // 進入頁面點擊播放將id傳到外部的局部變量中退出當前頁面換一個頁面進入不會觸發該事件 app.globalData.g_currentId = self.data.list[0].id; }); // this.onMusic(); if (app.globalData.g_isPlay && app.globalData.g_currentId == key) { this.setData({ isplay: true }); } ~~~ ### 整體代碼展示 ~~~ // pages/details/details.js const loacal = require("../../data/local"); //創建一個音樂實例 const audio = wx.getBackgroundAudioManager(); const app = getApp(); Page({ /** * 頁面的初始數據 */ data: { postList: [], list: [], isplay: false, }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { var key = options.id; // console.log(key) var self = this; var postList = loacal.postList; var list = []; var temp = {}; temp.author = postList[key].author; temp.dateTime = postList[key].dateTime; temp.detail = postList[key].detail; temp.musicurl = postList[key].music.url; temp.musiccoverImg = postList[key].music.coverImg; temp.imgSrc = postList[key].imgSrc; temp.avatar = postList[key].avatar; temp.title = postList[key].title; //數據下的id temp.id = postList[key].postId; list.push(temp); this.setData({ postList, list, }); // 音樂暫停監聽(頁面加載時如果音樂為暫停狀態改變音樂的狀態圖標) audio.onPause(() => { // console.log(1) this.setData({ isplay: false }) app.globalData.g_isPlay = false; app.globalData.g_currentId = null; }); // 音樂播放監聽(頁面加載時如果音樂為播放狀態改變音樂的狀態圖標) audio.onPlay(() => { // console.log(2) this.setData({ isplay: true }) app.globalData.g_isPlay = true; // 進入頁面點擊播放將id傳到外部的局部變量中退出當前頁面換一個頁面進入不會觸發該事件 app.globalData.g_currentId = self.data.list[0].id; }); // this.onMusic(); if (app.globalData.g_isPlay && app.globalData.g_currentId == key) { this.setData({ isplay: true }); } }, playmusic() { var url = this.data.list[0].musicurl; // console.log(url) if (this.data.isplay) { wx.stopBackgroundAudio(); // 停止音頻 audio.onPause(); this.setData({ isplay: false }) } else { wx.playBackgroundAudio(); //播放音頻 // audio.onPlay(); audio.src = url; this.setData({ isplay: true }) } }, //進入頁面是根據音樂的播放狀態來改變音樂狀態圖標 // onMusic() { // var self = this; // //監聽音樂播放事件（點擊后觸發的事件） // wx.onBackgroundAudioPlay((result) => { // // console.log(1) // this.setData({ // isplay: true // }); // app.globalData.g_isPlay = true; // //進入頁面點擊播放將id傳到外部的局部變量中退出當前頁面換一個頁面進入不會觸發該事件 // app.globalData.g_currentId = self.data.list[0].id; // }); // wx.onBackgroundAudioPause((result) => { // // console.log(2) // this.setData({ // isplay: false // }) // app.globalData.g_isPlay = false; // app.globalData.g_currentId = null; // }); // wx.onBackgroundAudioStop((result) => { // // console.log(3) // self.setData({ // isplay: false // }); // app.globalData.g_currentId = null; // }); // }, /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數--監聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數--監聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數--監聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { } }) ~~~ ~~~  <image src="{{isplay?list[0].musiccoverImg:list[0].imgSrc}}"></image> <image bindtap = "playmusic" src="{{isplay?'/images/music/music-stop.png':'/images/music/music-start.png'}}" class="music"></image> ~~~