## 音乐播放  [TOC] ### index.wxml ``` <music title="{{music.title}}" url="{{music.url}}"></music> ``` >传递音乐的标题和音源地址 ### index.json ``` { "usingComponents": { "music":"/components/music/music" } } ``` >注册music组件 ### index.js ``` import {local_data} from "../../data/local"; //引入外部数据js文件 const app = getApp() Page({ data: { music:local_data.music }, onLoad(){ console.log(this.data.music) } }) ``` ### music.js ``` // components/music/music.js const audio = wx.getBackgroundAudioManager(); Component({ properties: { title:String, url:String }, //注册index页面传递进来的数据title、url data: { isPlay:false }, methods: { onMusic(){ if(this.data.isPlay){ this.setData({ isPlay:false }) audio.pause(); } else{ audio.title = this.properties.title; audio.src = this.properties.url; //设置title、src属性之后可自动播放，不需要写play this.setData({ isPlay:true }) } } }, //attached相当于onload，该组件加载时进行音乐监听 attached(){ audio.onPlay(()=>{ this.setData({ isPlay:true }) }) audio.onPause(()=>{ this.setData({ isPlay:false }) }) audio.onStop(()=>{ this.setData({ isPlay:false }) }) audio.onEnded(()=>{ this.setData({ isPlay:false }) }) } }) ``` ### music.wxml ``` <!--components/music/music.wxml--> <view class="container"> <image class="banner {{isPlay?'rotate':''}}" src="/images/banner.png"></image> <image bindtap="onMusic" class="play" src="{{isPlay?'/images/play.png':'/images/pause.png'}}"></image> <text class="text" decode="{{true}}">谁念过 千字文章\n秋收冬已藏</text> </view> ``` >为音乐封面添加旋转样式，当判断音乐在播放时封面旋转 ### music.wxss ``` .container{ position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 100rpx; } .banner{ width: 500rpx; height: 500rpx; border-radius: 50%; } .play{ width: 100rpx; height: 100rpx; position: absolute; top:27%; } .text{ margin-top: 100rpx; line-height: 80rpx; color:gray; font-size: 35rpx; text-align: center; } .rotate{ animation: rotate 12s linear infinite } @keyframes rotate { from{ transform: rotate(0deg) }to{ transform: rotate(360deg) } } ``` ### data>local.js ``` var local_data ={ music: { url: "http://music.163.com/song/media/outer/url?id=571338279", title: "往后余生" } }; export {local_data} ```