微信小程序如何實現(xiàn)音樂播放器

這篇文章主要介紹微信小程序如何實現(xiàn)音樂播放器，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了阿勒泰免費建站歡迎大家使用！

效果圖

又用小程序內(nèi)置的背景音樂播放的方法寫了一遍，邏輯是一樣的邏輯，希望對大家有所幫助！

 <view class='audiosBox'>
  <view class="audioOpen" bindtap="listenerButtonPlay" wx:if="{{!isOpen}}">
   <image class='image2' src="../../images/play.png" />
  </view>
  <view class="audioOpen" bindtap="listenerButtonPause" wx:if="{{isOpen}}">
   <image src="../../images/pauses.png" />
  </view>
  <view class='slid'>
   <slider bindchange="sliderChange" block-size="12px" step="2" value="{{offset}}" max="{{max}}" selected-color="#4c9dee" />
   <view>
    <text class='times'>{{starttime}}</text> <!-- 進(jìn)度時長 -->
    
    <text class='times'>{{duration}}</text>  <!-- 總時長 -->
   </view>
  </view>
</view>

js部分注意了：bug ios 播放時必須加title 不然會報錯導(dǎo)致音樂不播放

//index.js
//獲取應(yīng)用實例
const bgMusic = wx.getBackgroundAudioManager()
const app = getApp()
 
Page({
 data: {
  isOpen: false,//播放開關(guān)
  starttime: '00:00', //正在播放時長
  duration: '06:41',  //總時長
  src:"http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46"
 },
 // 播放
 listenerButtonPlay: function () {
  var that = this
  //bug ios 播放時必須加title 不然會報錯導(dǎo)致音樂不播放
  bgMusic.title = '此時此刻' 
  bgMusic.epname = '此時此刻'
  bgMusic.src = that.data.src;
  bgMusic.onTimeUpdate(() => { 
   //bgMusic.duration總時長 bgMusic.currentTime當(dāng)前進(jìn)度
   console.log(bgMusic.currentTime)
   var duration = bgMusic.duration; 
   var offset = bgMusic.currentTime; 
   var currentTime = parseInt(bgMusic.currentTime);
   var min = "0" + parseInt(currentTime / 60);
   var max = parseInt(bgMusic.duration);
   var sec = currentTime % 60;
   if (sec < 10) {
    sec = "0" + sec;
   };
   var starttime = min + ':' + sec;  /* 00:00 */
   that.setData({
    offset: currentTime,
    starttime: starttime,
    max: max,
    changePlay: true
   })
  })
  //播放結(jié)束
  bgMusic.onEnded(() => {
   that.setData({
    starttime: '00:00',
    isOpen: false,
    offset: 0
   })
   console.log("音樂播放結(jié)束");
  })
  bgMusic.play();
  that.setData({
   isOpen: true,
  })
 },
 //暫停播放
 listenerButtonPause(){
   var that = this
  bgMusic.pause()
  that.setData({
   isOpen: false,
  })
 },
 listenerButtonStop(){
  var that = this
  bgMusic.stop()
 },
 // 進(jìn)度條拖拽
 sliderChange(e) {
  var that = this
  var offset = parseInt(e.detail.value);
  bgMusic.play();
  bgMusic.seek(offset);
  that.setData({
   isOpen: true,
  })
 },
 // 頁面卸載時停止播放
 onUnload() {
  var that = this
  that.listenerButtonStop()//停止播放
  console.log("離開")
 },
})

css部分 

/**index.wxss**/
.audiosBox{
 width: 92%;
 margin: auto;
 height: 130rpx;
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: #f6f7f7;
 border-radius: 10rpx;
}
/*按鈕大小 */
.audioOpen{
 width: 70rpx;
 height: 70rpx;
 border: 2rpx solid #4c9dee;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin-left: 20rpx;
}
 
image{
 width: 30rpx;
 height: 40rpx;
}
.image2{
 margin-left: 10%;
}
/*進(jìn)度條長度 */
.slid{
 flex: 1;
 position: relative;
}
.slid view{
 display: flex;
 justify-content: space-between;
}
.slid view>text:nth-child(1){
 color: #4c9dee;
 margin-left:6rpx; 
}
.slid view>text:nth-child(2){
 margin-right:6rpx; 
}
slider{
 width: 520rpx;
 margin: 0;
 margin-left: 35rpx;
}
/*橫向布局 */
.times{
 width: 100rpx;
 text-align: center;
 display: inline-block;
 font-size: 24rpx;
 color:#999999;
 margin-top: 5rpx;
}
.title view{
 text-indent: 2em;
 
}

以上是“微信小程序如何實現(xiàn)音樂播放器”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞名稱：微信小程序如何實現(xiàn)音樂播放器
鏈接地址：http://muchs.cn/article32/piogsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、、面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)