微信小程序音乐播放器代码
时间: 2023-10-05 16:12:33 浏览: 22
以下是一个简单的微信小程序音乐播放器的代码示例:
wxml 文件:
```html
<view class="container">
<audio id="myAudio" src="{{musicUrl}}" bindplay="onPlay" bindpause="onPause" bindtimeupdate="onTimeUpdate"></audio>
<view class="player">
<image class="cover" src="{{coverUrl}}"></image>
<view class="info">
<view class="name">{{musicName}}</view>
<view class="artist">{{artist}}</view>
</view>
<view class="controls">
<image class="prev" src="/assets/images/prev.png" bindtap="prev"></image>
<image class="{{isPlaying ? 'pause' : 'play'}}" src="/assets/images/{{isPlaying ? 'pause' : 'play'}}.png" bindtap="togglePlay"></image>
<image class="next" src="/assets/images/next.png" bindtap="next"></image>
</view>
</view>
</view>
```
js 文件:
```javascript
Page({
data: {
musicUrl: 'http://example.com/music.mp3',
coverUrl: 'http://example.com/cover.jpg',
musicName: '歌曲名',
artist: '歌手名',
isPlaying: false
},
onPlay: function () {
console.log('音乐开始播放')
},
onPause: function () {
console.log('音乐暂停')
},
onTimeUpdate: function (e) {
console.log('音乐播放进度:', e.detail.currentTime)
},
togglePlay: function () {
var myAudio = wx.createInnerAudioContext()
if (this.data.isPlaying) {
myAudio.pause()
} else {
myAudio.src = this.data.musicUrl
myAudio.play()
}
this.setData({
isPlaying: !this.data.isPlaying
})
},
prev: function () {
console.log('播放上一首')
},
next: function () {
console.log('播放下一首')
}
})
```
注意:此示例仅为演示用途,实际应用中需做好音乐版权相关事宜。