vue网易云音乐播放设计代码
时间: 2023-09-12 09:09:53 浏览: 49
以下是一个简单的 Vue 网易云音乐播放器的代码示例,仅供参考:
```
<template>
<div>
<audio ref="audio" :src="currentSong.url" @timeupdate="handleTimeupdate">
</audio>
<div class="player">
<div class="player__controls">
<button class="player__control-btn" @click="togglePlaying">
{{ isPlaying ? '暂停' : '播放' }}
</button>
<div class="player__progress-wrapper">
<div class="player__progress" :style="{ width: progressBarWidth }"></div>
</div>
<button class="player__control-btn" @click="nextSong">
下一首
</button>
</div>
<div class="player__info">
<div class="player__song-name">{{ currentSong.name }}</div>
<div class="player__artist">{{ currentSong.artist }}</div>
<div class="player__lyrics" v-html="lyrics"></div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
computed: {
...mapGetters(['currentSong', 'isPlaying', 'lyrics']),
progressBarWidth() {
return `${(this.currentTime / this.currentSong.duration) * 100}%`
},
},
methods: {
...mapActions(['togglePlay', 'next']),
togglePlaying() {
this.togglePlay()
if (this.isPlaying) {
this.$refs.audio.play()
} else {
this.$refs.audio.pause()
}
},
nextSong() {
this.next()
this.$refs.audio.load()
this.$refs.audio.play()
},
handleTimeupdate() {
this.$store.commit('setCurrentTime', this.$refs.audio.currentTime)
},
},
}
</script>
<style>
.player {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 20px;
background-color: #eee;
}
.player__controls {
display: flex;
flex-direction: row;
align-items: center;
}
.player__control-btn {
margin-right: 20px;
padding: 10px;
font-size: 16px;
background-color: #ccc;
border: none;
border-radius: 5px;
cursor: pointer;
}
.player__progress-wrapper {
width: 300px;
height: 10px;
background-color: #fff;
border-radius: 5px;
margin: 0 20px;
position: relative;
}
.player__progress {
height: 100%;
background-color: #333;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
}
.player__info {
flex: 1;
text-align: center;
margin-left: 20px;
}
.player__song-name {
font-size: 24px;
font-weight: bold;
}
.player__artist {
font-size: 16px;
color: #666;
margin-top: 10px;
}
.player__lyrics {
margin-top: 20px;
font-size: 16px;
line-height: 1.5;
text-align: center;
}
</style>
```
这是一个简单的 Vue 组件,包含了播放器控制按钮、进度条、歌曲信息和歌词展示等。该组件使用 Vuex 管理播放状态和歌曲列表,使用 HTML5 的 Audio API 实现播放功能,使用 Vue 的计算属性和方法实现进度条和用户交互等功能。需要注意的是,该组件仅供参考,具体实现可能需要根据实际需求进行适当调整。