欢迎光临
我的个人博客网站

微信小程序:音乐播放器

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

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 微信小程序:音乐播放器
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏