西安专业做网站的15个网页设计的案例

要求

1.页面包含一个音乐列表，点击列表中的音乐可以播放对应的音乐。
2.播放中的音乐在列表中有标识，并且可以暂停或继续播放。
3.显示当前音乐的播放进度和总时长，并可以拖动进度条调整播放进度。
4.点击切换按钮可以切换到下一首音乐。
5.点击循环按钮可以切换音乐的播放模式（单曲循环、列表循环、随机播放）。

代码实现

wxml 文件

<view class="container"><scroll-view scroll-y class="music-list"><view wx:for="{{ musicList }}" wx:key="{{ index }}" class="music-item" bindtap="onMusicTap" data-index="{{ index }}"><view class="music-name">{{ item.name }}</view><view class="music-artist">{{ item.artist }}</view></view></scroll-view><audio id="audio" src="{{ currentMusic.src }}" bindtimeupdate="onTimeUpdate" bindended="onEnded"></audio><view class="player"><view class="controls"><button class="control-btn" bindtap="onPrev">上一首</button><button class="control-btn" bindtap="onPlayOrPause">{{ playing ? '暂停' : '播放' }}</button><button class="control-btn" bindtap="onNext">下一首</button><button class="control-btn" bindtap="onChangeMode">模式</button></view><view class="progress"><text>{{ currentTime }}</text><slider max="{{ duration }}" value="{{ currentPosition }}" bindchange="onSliderChange" /><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() 函数实现了切换播放模式的逻辑，通过取余操作循环切换三种播放模式。

到这里也就结束了，希望对您有所帮助。