网站没有设置关键词,滁州市城市建设投资有限公司网站,西安装修公司哪家口碑最好,信息流广告二级代理微信小程序实现一个音乐播放器的功能 要求代码实现wxml 文件wxss 文件js文件 解析 要求 1.页面包含一个音乐列表#xff0c;点击列表中的音乐可以播放对应的音乐。 2.播放中的音乐在列表中有标识#xff0c;并且可以暂停或继续播放。 3.显示当前音乐的播放进度和总时长#… 微信小程序实现一个音乐播放器的功能 要求代码实现wxml 文件wxss 文件js文件 解析 要求 1.页面包含一个音乐列表点击列表中的音乐可以播放对应的音乐。 2.播放中的音乐在列表中有标识并且可以暂停或继续播放。 3.显示当前音乐的播放进度和总时长并可以拖动进度条调整播放进度。 4.点击切换按钮可以切换到下一首音乐。 5.点击循环按钮可以切换音乐的播放模式单曲循环、列表循环、随机播放。 代码实现
wxml 文件
view classcontainerscroll-view scroll-y classmusic-listview wx:for{{ musicList }} wx:key{{ index }} classmusic-item bindtaponMusicTap data-index{{ index }}view classmusic-name{{ item.name }}/viewview classmusic-artist{{ item.artist }}/view/view/scroll-viewaudio idaudio src{{ currentMusic.src }} bindtimeupdateonTimeUpdate bindendedonEnded/audioview classplayerview classcontrolsbutton classcontrol-btn bindtaponPrev上一首/buttonbutton classcontrol-btn bindtaponPlayOrPause{{ playing ? 暂停 : 播放 }}/buttonbutton classcontrol-btn bindtaponNext下一首/buttonbutton classcontrol-btn bindtaponChangeMode模式/button/viewview classprogresstext{{ currentTime }}/textslider max{{ duration }} value{{ currentPosition }} bindchangeonSliderChange /text{{ durationStr }}/text/view/view
/view
wxss 文件
.container {padding: 20rpx;
}.music-list {height: 300rpx;
}.music-item {padding: 10rpx;border-bottom: 1rpx solid #eee;text-align: left;
}.player {margin-top: 20rpx;display: flex;flex-direction: column;align-items: center;
}.controls {display: flex;justify-content: space-around;width: 100%;margin-bottom: 10rpx;
}.control-btn {background-color: #009688;color: #fff;padding: 10rpx 20rpx;border-radius: 4rpx;
}progress {display: flex;align-items: center;
}.slider {flex: 1;margin: 0 10rpx;
}js文件
Page({data: {musicList: [{ name: 歌曲1, artist: 歌手1, src: music1.mp3 },{ name: 歌曲2, artist: 歌手2, src: music2.mp3 },// 更多音乐...],currentMusic: {},playing: false,duration: 0,currentPosition: 0,currentTime: 00:00,durationStr: 00:00,playMode: 0, // 0: 列表循环1: 单曲循环2: 随机播放},onMusicTap(e) {const index e.currentTarget.dataset.index;const music this.data.musicList[index];this.setData({currentMusic: music,playing: true,});this.playMusic();},onPlayOrPause() {if (this.data.playing) {this.pauseMusic();} else {this.playMusic();}},playMusic() {const audio this.selectComponent(#audio);audio.play();this.setData({playing: true,});},pauseMusic() {const audio this.selectComponent(#audio);audio.pause();this.setData({playing: false,});},onPrev() {let currentIndex this.data.musicList.findIndex(item item.src this.data.currentMusic.src);if (currentIndex 0) {currentIndex this.data.musicList.length - 1;} else {currentIndex--;}const music this.data.musicList[currentIndex];this.setData({currentMusic: music,playing: true,});this.playMusic();},onNext() {let currentIndex this.data.musicList.findIndex(item item.src this.data.currentMusic.src);if (currentIndex this.data.musicList.length - 1) {currentIndex 0;} else {currentIndex;}const music this.data.musicList[currentIndex];this.setData({currentMusic: music,playing: true,});this.playMusic();},onTimeUpdate(e) {const duration e.detail.duration;const currentPosition e.detail.currentTime;const currentTime this.formatTime(currentPosition);const durationStr this.formatTime(duration);this.setData({duration: duration,currentPosition: currentPosition,currentTime: currentTime,durationStr: durationStr,});},onEnded() {if (this.data.playMode 1) {// 单曲循环const audio this.selectComponent(#audio);audio.seek(0);audio.play();} else {this.onNext();}},onSliderChange(e) {const value e.detail.value;const audio this.selectComponent(#audio);audio.seek(value);},onChangeMode() {let playMode this.data.playMode;playMode (playMode 1) % 3;this.setData({playMode: playMode,});},formatTime(time) {const minutes Math.floor(time / 60);const seconds Math.floor(time % 60);const minuteStr minutes 10 ? 0 minutes : minutes;const secondStr seconds 10 ? 0 seconds : seconds;return minuteStr : secondStr;},
});
解析 其中onPrev() 和 onNext() 函数实现了切换到上一首和下一首音乐的逻辑。通过 findIndex() 函数找到当前音乐在列表中的位置然后根据播放模式计算出下一首或上一首音乐的位置更新当前音乐并播放。 onTimeUpdate() 函数实现了更新播放进度的逻辑通过 detail 参数获取音频的总时长和当前播放进度并格式化成 00:00 的形式更新页面数据。 onEnded() 函数实现了音乐播放结束的逻辑根据当前的播放模式决定是单曲循环还是切换到下一首音乐。 onSliderChange() 函数实现了调整播放进度的逻辑通过 seek() 函数跳转到指定的时间点。 onChangeMode() 函数实现了切换播放模式的逻辑通过取余操作循环切换三种播放模式。 到这里也就结束了希望对您有所帮助。
