趁周末做一個簡單的微信小程序音樂播放器，源碼已留。

1. 播放列表首頁wxml

  
    
    
    
  


  
    
  


  
    
      
      {{item.name}}
      {{item.title}}-{{item.name}}
      {{item.time}}
      
    
  

2，播放列表js

let music = require('../../utils/data.js');
const app = getApp();
Page({
  data: {
    // 輪播圖
    swipterSet:{
      // 是否顯示面板指示點
      indicator_dots:true,
  	  //指示點顏色
      indicator_color: '#FFFFFF',
      // 當前選中的指示點顏色
      indicator_active_color:'#FFDD00',
      //是否自動切換
      autoplay:true,
      // 當前所在滑塊的index
      current:1,
      // 自動切換時間間隔 毫秒
      interval:1000,
      // 滑動動畫時長
      duration:700,
      // 是否采用銜接滑動
      circular:true,
      // 滑動方向是否為縱向
      vertical:false,
      // "0px"	前邊距，可用于露出前一項的一小部分，接受 px 和 rpx 值
      previous_margin	:'30rpx',
      // "0px" 后邊距，可用于露出后一項的一小部分，接受 px 和 rpx 值	
      next_margin:'30rpx',
      // 同時顯示的滑塊數量
      display_multiple_items:1,
      // 跳過未顯示的滑塊布局 設為 true 可優化復雜情況下的滑動性能，但會丟失隱藏狀態滑塊的布局信息
      skip_hidden_item_layout:false,
      // 指定 swiper 切換緩動動畫類型
      // default	默認緩動函數	
      // linear	線性動畫	
      // easeInCubic	緩入動畫	
      // easeOutCubic	緩出動畫	
      // easeInOutCubic	緩入緩出動畫	
      // change事件 source 返回值
      // 從 1.4.0 開始，change事件增加 source字段，表示導致變更的原因，可能值如下：
      //autoplay 自動播放導致swiper變化；
      //touch 用戶劃動引起swiper變化；
      //其它原因將用空字符串表示。
      easing_function:'easeInOutCubic',
      // 圖片寬高
      width:680,
      height:350
    },
    music_img:[],
    music_list:[],
    v_height:0,
  },
  // current 改變時會觸發 change 事件，event.detail = { current, source }
  bindchange: function (eventhandle) {
     // { current: 2, currentItemId: "", source: "autoplay" }
    // console.log(eventhandle.detail);
  },
  // swiper - item 的位置發生改變時會觸發 transition 事件 event.detail = { dx: dx, dy: dy }
  bindtransition: function (eventhandle) {
    // { dx: 295.90679883381927, dy: 0 }
    // console.log(eventhandle.detail);
  },
  // 動畫結束時會觸發 animationfinish 事件，event.detail 同上
  bindanimationfinish: function (eventhandle) {
    // { current: 2, currentItemId: "", source: "autoplay" }
    // console.log(eventhandle.detail);
  },
  onLoad: function () {
    this.setData({
      music_img: music.swipter_url(),
      music_list: music.music_data()
    })
  },
  onReady:function(){
    var that=this;
    this.getOtherHeight(['.swiper','.searPar'],function(res){
      that.setData({
        v_height:wx.getSystemInfoSync().windowHeight - res[0].height - res[1].height,
      }) 
    });
  },
  getOtherHeight: function (keyArray, succes) {
    var query = wx.createSelectorQuery();
    for(let i = 0; i {
      succes(res);
    })
  },
  inputSear:function(e){
    let name = e.detail.value;
    let arr= music.music_data();
    for(let i=0;i
    
      {{item}}
    
   
    
  

5,播放頁面js

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    music_data:{
      // 要播放音頻的資源地址
      src:"",
      // 是否循環播放
      loop:false,
      // 是否顯示默認控件
      controls:false,
      // 默認控件上的音頻封面的圖片資源地址，如果 controls 屬性值為 false 則設置 poster 無效
      poster:'',
      // 默認控件上的音頻名字，如果 controls 屬性值為 false 則設置 name 無效
      name	:"",
      // 默認控件上的作者名字，如果 controls 屬性值為 false 則設置 author 無效	
      author:"",
      word:""
    },
    allHeight:0,
    allWidth:0,
    wHeight:0
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var obj= JSON.parse(options.content); //由json字符串轉換為json對象
    this.setData({
      music_data: {
        src: obj.music,
        loop: false,
        controls: true,
        poster: obj.img,
        name: obj.name,
        author: obj.title,
        word: obj.music_word
      }
    })
    console.log(obj);
    var audioCtx= wx.createInnerAudioContext('myMusic');
    audioCtx.play();
  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    var that = this;
    this.getOtherHeight(['#myMusic'], function (res) {
      that.setData({
        allHeight: wx.getSystemInfoSync().windowHeight,
        allWidth: wx.getSystemInfoSync().windowWidth,
        wHeight: wx.getSystemInfoSync().windowHeight -res[0].height,
      })
      console.log(wx.getSystemInfoSync().windowHeight - res[0].height);
    });

  },
  getOtherHeight: function (keyArray, succes) {
    var query = wx.createSelectorQuery();
    for (let i = 0; i < keyArray.length; i++)
      query.select(keyArray[i]).boundingClientRect();
    query.exec((res) => {
      succes(res);
    })
  },
  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  },
  // audioPlay: function () {
  //   this.audioCtx.play()
  // },
  // audioPause: function () {
  //   this.audioCtx.pause()
  // },
  // audio14: function () {
  //   this.audioCtx.seek(14)
  // },
  // audioStart: function () {
  //   this.audioCtx.seek(0)
  // }

  //  binderror	eventhandle		否	當發生錯誤時觸發 error 事件，detail = { errMsg: MediaError.code }	1.0.0
  //   bindplay	eventhandle		否	當開始 / 繼續播放時觸發play事件	1.0.0
  //   bindpause	eventhandle		否	當暫停播放時觸發 pause 事件	1.0.0
  //   bindtimeupdate	eventhandle		否	當播放進度改變時觸發 timeupdate 事件，detail = { currentTime, duration }	1.0.0
  //   bindended	eventhandle		否	當播放到末尾時觸發 ended 事件	1.0.0
})

6，播放頁wxss

.allPage{
  position: relative;
}
#myMusic{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10rpx;
}
#word{
  position: absolute;
  left: 0;
  top: 0;
  color: white;
}
text{
  display: block;
  text-align: center;
  margin: 10rpx 0;
}

7，數據
function swipter_url(){
return [
{
src: ‘https://p3fx.kgimg.com/stdmusic/20200320/20200320123904521386.jpg’
},
{
src: ‘https://p3fx.kgimg.com/stdmusic/20200417/20200417115814250186.jpg’
},
{
src: ‘https://p3fx.kgimg.com/stdmusic/20191110/20191110174405582448.jpg’
}
];
}
function music_data(){
return [
{
title:‘點歌的人’,
name:‘海來阿木’,
time:‘3: 17’,
music: ‘https://webfs.yun.kugou.com/202004251815/24aea63991e1b92b8a0cea171fb8f032/G207/M08/0D/17/b4cBAF50SeaAGPCVADAvrBQvKrw897.mp3’,
music_word:[‘暫無歌詞’],
img:‘https://p3fx.kgimg.com/stdmusic/20200320/20200320123904521386.jpg’
},
{
title: ‘胡66’,
name: ‘后來遇見他’,
time: ‘4: 09’,
music: ‘https://webfs.yun.kugou.com/202004251817/09a6fd3d99f0e5323c0bf4987dd8cd10/G209/M04/15/1B/sZQEAF5yIAGABKyMADz-g6dtNsQ387.mp3’,
music_word: [‘暫無歌詞’],
img: ‘https://p3fx.kgimg.com/stdmusic/20200312/20200312194032367333.jpg’
},
{
title: ‘哈利Halleeee’,
name: ‘星星失眠’,
time: ‘4: 12’,
music: ‘https://webfs.yun.kugou.com/202004251819/8ca047448a8957cbab460e45bbbc8395/G211/M0A/12/05/s5QEAF6f9XiAUx-kAD2LRvlAlJY553.mp3’,
music_word: [‘暫無歌詞’],
img: ‘https://p3fx.kgimg.com/stdmusic/20200422/20200422112211623513.jpg’
},
{
title: ‘傅如喬’,
name: ‘微微’,
time: ‘4: 37’,
music: ‘https://webfs.yun.kugou.com/202004251819/7c5a8d4c749f2ca5c011da6edf470733/G200/M0A/14/15/aIcBAF54ZTuASZlZAEOqn_GhLhs992.mp3’,
music_word: [‘暫無歌詞’],
img: ‘https://p3fx.kgimg.com/stdmusic/20200417/20200417115814250186.jpg’
},
{
title: ‘皮卡丘多多’,
name: ‘驚雷’,
time: ‘3: 39’,
music: ‘https://webfs.yun.kugou.com/202004251821/160be8b1881c2dc2db58074f7ca233f2/G193/M0B/13/19/oZQEAF6NobqAQvG3ADWHB-eBPk4697.mp3’,
music_word: [‘暫無歌詞’],
img: ‘https://p3fx.kgimg.com/stdmusic/20200408/20200408174122360975.jpg’
},
{
title: ‘Ava Max’,
name: ‘Salt’,
time: ‘3: 02’,
music: ‘https://webfs.yun.kugou.com/202004251823/b54e7a988bf44a7a630d35cddcfbaa17/part/0/960931/G095/M04/1C/09/_4YBAFuyAQCAcS5IACxzw8IlOUk721.mp3’,
music_word: [‘暫無歌詞’],
img: ‘https://p3fx.kgimg.com/stdmusic/20191211/20191211153103312934.png’
},
{
title: ‘夢然’,
name: ‘少年’,
time: ‘3: 56’,
music: ‘https://webfs.yun.kugou.com/202004251824/c387577405b013ab9e178fdace352a8a/G170/M07/16/11/SocBAF3H3aqAUYOEADmpdloW3bU827.mp3’,
music_word: [‘少年 - 夢然’, ‘詞：夢然’, ‘曲：夢然’, ‘編曲：張亮’, ‘制作人：張亮’, ‘徐閣’, ‘和聲編寫：海青’, ‘夢然’, ‘和聲演唱：海青/夢然’, ‘混音工程師：趙靖’, ‘母帶工程師：趙靖’, ‘監制：夢然’, ‘換種生活’, ‘讓自己變得快’, ‘放棄執著’, ‘天氣就會變得不錯’, ‘每次走過’, ‘都是一次收獲’, ‘還等什么 做對的選擇’, ‘過去的’, ‘就讓它過去吧’, ‘別管那是一個玩笑還是謊話’, ‘路在腳下’, ‘其實并不復雜’, ‘只要記得你是你呀’, ‘Wu oh oh’, ‘Wu oh oh’, ‘我還是從前那個少年’, ‘沒有一絲絲改變’, ‘時間只不過是考驗’, ‘種在心中信念絲毫未減’, ‘眼前這個少年’, ‘還是最初那張臉’, ‘面前再多艱險不退卻’, ‘Say never never give up’, ‘Like a fighter’, ‘Wu oh oh’, ‘換種生活’, ‘讓自己變得快樂’, ‘放棄執著’, ‘天氣就會變得不錯’, ‘每次走過’, ‘都是一次收獲’, ‘還等什么 做對的選擇’, ‘過去的’, ‘就讓它過去吧’, ‘別管那是一個玩笑還是謊話’, ‘路在腳下’, ‘其實并不復雜’, ‘只要記得你是你呀’, ‘Miya miya miya miya miya’, ‘Call me’, ‘Miya miya miya miya miya’, ‘我還是從前那個少年’, ‘沒有一絲絲改變’, ‘時間只不過是考驗’, ‘種在心中信念絲毫未減’, ‘眼前這個少年’, ‘還是最初那張臉’, ‘面前再多艱險不退卻’, ‘Say never never give up’, ‘Like a fighter’, ‘追逐生命里光臨身邊的每道光’, ‘讓世界因為你的存在變的閃亮’, ‘其實你我他并沒有什么不同’, ‘只要你愿為希望畫出一道想象’, ‘成長的路上必然經歷很多風雨’, ‘相信自己終有屬于你的盛舉’, ‘別因為磨難 停住你的腳步’, ‘堅持住 就會擁有屬于你的藍圖’, ‘Wu oh oh’, ‘我還是從前那個少年’, ‘沒有一絲絲改變’, ‘時間只不過是考驗種’, ‘在心中信念絲毫未減’, ‘眼前這個少年’, ‘還是最初那張臉’, ‘面前再多艱險不退卻’, ‘Say never never give up’, ‘Like a fighter’, ‘我還是從前那個少年miya’, ‘我還是從前那個少年miya’, ‘我還是眼前這個少年miya’,‘我還是從前那個少年miya’],
img: ‘https://p3fx.kgimg.com/stdmusic/20191110/20191110174405582448.jpg’
}
];
}
module.exports={
swipter_url: swipter_url,
music_data: music_data
}
8，效果圖