微信小程式:音樂播放器的使用1
阿新 • • 發佈:2019-01-27
首先第一點。這個音樂播放其實也沒什麼大的問題,但是有些時候可能要根據pm來開發的時候回有點噁心,比如我就遇到了。勉強提交了一個版本後,開始好好的梳理下這個audio的
一開始的時候,pm跟我說我肯定想到的是使用backgroundaudio來播放音樂的,畢竟光是audio元件就不一樣了,所以肯定要重寫一個元件的,但是仔細想了下,有個比較大的問題,就是使用background的時候,他會自動播放,所以想了下,還是使用
createInnerAudioContext好點。
直接上最簡單的播放程式碼上去
var myaudio;//個人音樂播放器 Page({ onShow: function () { // 初始化音樂播放器 myaudio = wx.createInnerAudioContext(); // 模擬後臺獲取到播放的路徑 setTimeout(function () { myaudio.src = "http://p0kmdnxqs.bkt.clouddn.com/20180412151357"; }, 1000); }, playmusic: function () { const that = this; // 當播放的路徑是空的時候, if (myaudio.src == "") { console.log("音樂尚未載入完畢") setTimeout(function () { that.playmusic(); }, 200); } else { that.myaudio.play(); } } })
<!--播放按鈕 -->
<button bindtap='playmusic'>點選播放音樂</button>
沒錯,平平無奇的程式碼。絲毫無優越性可言
但是這是最基礎的,還是要記住
接下來,我們需要加上一個進度條,當然首選是使用slider,有問題的話可以留言指導
所以,接下來的程式碼應該是這樣的:這兒有兩個簡單的,最基礎的要求,1:要slider跟著滾動,這點是肯定的,毋庸置疑的,
還有一點是顯示整個的時間還有顯示當前的時間,為了方便,我就使用秒作為單位來計算,不做資料顯示處理
加上一個顯示長度先:
var myaudio;//個人音樂播放器Page({ data: {真機上是這樣的:
沒錯,我等了好幾十分鐘了,還是沒掃出來,所以我知道,開發者工具是不可靠的,於是我點了下那個播放按鈕
很完美,出來了,所以說這個可以是第一個問題。當然接下里還有很多個問題會出現,所以我們先去吃個飯再說