微信小程序：音乐播放器

 音乐资源使用的是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(); }})

 

原文转载：http://www.shaoqun.com/a/494498.html

海鹰数据：https://www.ikjzd.com/w/2539

transfer：https://www.ikjzd.com/w/1735

敦煌网站：https://www.ikjzd.com/w/189

音乐资源使用的是QQ音乐资源。图片资源使用的网易云音乐的专辑图片。HTML：<viewclass="container"><divwx:for="{{musicSrc}}"wx:key="*this"><audioid="myAudio{{index}}"src="{{item.
启明星：启明星
智赢：智赢
北京小吃哪里最多最好吃？：北京小吃哪里最多最好吃？
卖家有福了！信用保障评价分规则即将升级！：卖家有福了！信用保障评价分规则即将升级！
前有港独T恤，后有脱欧暴力笔记本！亚马逊风波不断：前有港独T恤，后有脱欧暴力笔记本！亚马逊风波不断