- A+
所属分类:Web前端
音乐资源使用的是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(); } })