微信小程序:音乐播放器

  • A+
所属分类:Web前端
摘要

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

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