微信小程序：音乐播放器

 音乐资源使用的是QQ音乐资源。图片资源使用的网易云音乐的专辑图片。

 

HTML：

<view class="container">
  <div wx:for="{{musicSrc}}" wx:key="*this">
    <audio id="myAudio{{index}}" src="{{item.src}}" name="{{item.name}}" author="{{item.author}}" poster="{{item.poster}}" controls="{{item.control}}" loop="{{item.loop}}">
    </audio>
    <button bindtap="audioPlay" data-musicSrc="{{item.src}}">Play</button>
    <button bindtap="audioPause">Pause</button>
  </div> 
</view>

  

JS：

//index.js
//获取应用实例
const app = getApp()
const song = wx.createInnerAudioContext();
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    musicSrc: [{
      src:"http://ws.stream.qqmusic.qq.com/C4000029Lt3K2XVP75.m4a?guid=8922593070&vkey=F4A818F366A752B6E283B44A72147E4FA5D8764C8A05CE15B8DAAC0FCF33F5A317BBC81267349DBDA57D243E53169432B045D5DF96208E94&uin=8034&fromtag=66",
      poster: "http://p2.music.126.net/KTo5oSxH3CPA5PBTeFKDyA==/109951164581432409.jpg?param=130y130",//音频封面资源
      loop: true,
      control: true,
      name: "光年之外",
      author: "邓紫棋"
    },{
      src:"http://isure.stream.qqmusic.qq.com/C400001QJyJ32zybEe.m4a?guid=8922593070&vkey=D8FD8C8FDE12568794310F74ECA12DBC8E542F07DF16904D9C74BB4920989FC016CDBEC7B4EE0D781F3ADFF4E50C8826882F1E361515BB51&uin=8034&fromtag=66",
      poster: "http://p2.music.126.net/KTo5oSxH3CPA5PBTeFKDyA==/109951164581432409.jpg?param=130y130",//音频封面资源
      loop: true,
      control: true,
      name: "句号",
      author: "邓紫棋"
    }]
  },
  audioPlay(item){
    if(song){
      song.destroy();
    }
    console.log(item)
    song.src = item.target.dataset.musicsrc;
    song.play();
    song.onError = function(error){
      console.log(error);
    }
  },
  audioPause(e){
    console.log(e);
    song.pause();
  }
})