# 小程序播放音乐 ## 旧版本（不久会淘汰）：wx.playBackgroundAudio(Object object) 必填属性有：dataUrl，为音乐链接 选填属性有： | 参数 | 类型 | 说明 | |---|---|---| | title | string | 音乐标题 | | coverImgUrl | string | 封面URL | | success | function | 接口调用成功的回调函数 | | fail | function | 接口调用失败的回调函数 | | complete | function | 接口调用结束的回调函数（调用成功、失败都会执行） | 1. 在.wxml内写入按钮，点击播放音乐 ~~~ // 点击事件触发，播放音乐 ~~~ ~~~ <button bindtap='click'>Paris</button> Page({ click() { wx.playBackgroundAudio({ dataUrl: this.data.url, title:'Paris' }) }, ~~~ # 新版本 wx.getBackgroundAudioManager ## 详细api点击[链接](https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html) ### 1.属性 | 参数 | 类型 | 说明 | |---|---|---| | src|string |默认为空字符串，当设置了新的 src 时，会自动开始播放 | |startTime | number| 音频开始播放的位置（单位：s）。| |title |string |音频标题，用于原生音频播放器音频标题（必填）。 | |epname |string | 专辑名，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。| | singer| string |歌手名 | | coverImgUrl| string |封面图 URL，用于做原生音频播放器背景图。 | | webUrl| string |页面链接，原生音频播放器中的分享功能，分享出去的卡片简介，也将使用该值。 | | protocol|string |音频协议 | |duration |number | 当前音频的长度（单位：s），只有在有合法 src 时返回。（只读）| |currentTime | number | 当前音频的播放位置（单位：s），只有在有合法 src 时返回。（只读）| |paused |boolean |当前是否暂停或停止。（只读） | | buffered| number |音频已缓冲的时间，仅保证当前播放时间点到此时间点内容已缓冲。（只读） | > **在写音乐播放函数时，src和title必须都写，并放在一起才能进行播放** ~~~ var audio = wx.getBackgroundAudioManager(); // playMusic() 函数是自定义函数 playMusic(){ audio.title = "title"; audio.src = "src"; } audio.onPlay(){} audio.onPause(){} audio.onStop(){} ~~~ ## **音乐播放组件demo** 使用前提：该组件需要从父组件传递两条数据（title和url）来支持音乐播放 ~~~ /* music.js */ const audio = wx.getBackgroundAudioManager(); Component({ /** * 组件的属性列表 */ properties: { //在外面的musci.wxml中会用到，所以需要定义。 title: String, url: String }, /** * 组件的初始数据 */ 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; this.setData({ isPlay: true }) } } }, 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 */ <view class="music"> <image class="pictrue {{isPlay?'rotate':''}}" src="../../images/banner.png" mode="" ></image> //判断图片是否播放，播放的时候需要旋转！ <image class="play" src="{{isPlay?'../../images/play.png':'../../images/pause.png'}}" bind:tap="onMusic" ></image> //是否播放，图标会变化； </view> ~~~ 音乐背景图片旋转 ~~~ .rotate{ animation: rotate 19s infinite; } @keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } } ~~~