好的，这里提供
一个基于
Vue.js的简单
音乐播放器示例。
首先，我们需要准备
一个音乐文件和一些歌曲信息。在这个示例中，我们将使用以下歌曲信息：
```javascript
[
{
id: 1,
title: "Shape of You",
artist: "Ed Sheeran",
album: "÷",
duration: 233
url: "https://xxx
.xxx/shape_of_you
.mp3"
},
{
id: 2,
title: "Sugar",
artist: "Maroon 5",
album: "V",
duration: 235
url: "https://xxx
.xxx/sugar
.mp3"
},
//
...
]
```
接下来，我们可以编写
一个音乐播放器组件`MusicPlayer`，如下所示：
```html
<template>
<div class="music-player">
<div class="music-info">
<div class="music-title">{{ currentSong
.title }}</div>
<div class="music-artist">{{ currentSong
.artist }}</div>
</div>
<div class="music-controls">
<button class="play-btn" :class="{ 'playing': isPlaying }" @click="togglePlay"></button>
<div class="progress-bar">
<div class="progress" :style="{ width: progress + '%' }"></div>
</div>
<div class="time">{{ currentTime }} / {{ duration }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
songs: [
{
id: 1,
title: "Shape of You",
artist: "Ed Sheeran",
album: "÷",
duration: 233,
url: "https://xxx
.xxx/shape_of_you
.mp3"
},
{
id: 2,
title: "Sugar",
artist: "Maroon 5",
album: "V",
duration: 235,
url: "https://xxx
.xxx/sugar
.mp3"
},
//
...
],
currentSongIndex: 0,
isPlaying: false,
currentTime: 0,
duration: 0,
progress: 0,
audio: null
};
},
computed: {
currentSong() {
return this
.songs[this
.currentSongIndex];
}
},
mounted() {
this
.audio = new Audio();
this
.audio
.addEventListener("timeupdate", this
.updateTime);
this
.audio
.addEventListener("ended", this
.nextSong);
this
.loadSong();
},
methods: {
loadSong() {
this
.audio
.src = this
.currentSong
.url;
this
.audio
.load();
this
.duration = this
.currentSong
.duration;
},
togglePlay() {
if (this
.isPlaying) {
this
.audio
.pause();
} else {
this
.audio
.play();
}
this
.isPlaying = !this
.isPlaying;
},
updateTime() {
this
.currentTime = Math
.floor(this
.audio
.currentTime);
this
.progress = (this
.currentTime / this
.duration) * 100;
},
nextSong() {
this
.currentSongIndex = (this
.currentSongIndex + 1) % this
.songs
.length;
this
.loadSong();
this
.audio
.play();
this
.isPlaying = true;
}
}
};
</script>
<style scoped>
.music-player {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 300px;
padding: 20px;
background-color: #f2f2f2;
}
.music-info {
text-align: center;
margin-bottom: 20px;
}
.music-title {
font-size: 24px;
font-weight: bold;
}
.music-artist {
font-size: 16px;
color: #999;
}
.music-controls {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.play-btn {
display: block;
width: 80px;
height: 80px;
border: none;
border-radius: 50%;
background-color: #f44336;
background-image: url("https://cdn3
.iconfinder
.com/data/icons/google-material-design-icons/48/ic_play_circle_filled_48px-512
.png");
background-size: 60%;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
transition: background-color 0
.2s ease-in-out;
}
.playing {
background-color: #4caf50;
}
.playing:before {
content: "";
display: block;
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 40px solid #fff;
border-bottom: 25px solid transparent;
margin-left: 20px;
}
.progress-bar {
width: 100%;
height: 4px;
background-color: #ccc;
margin: 10px 0;
}
.progress {
width: 0;
height: 100%;
background-color: #f44336;
}
.time {
font-size: 14px;
color: #999;
}
</style>
```
在这个示例中，我们定义了
一个`MusicPlayer`组件，并使用`data`属性来存储歌曲列表、当前歌曲索引、播放状态、当前播放时间、音频对象等信息。我们还使用计算属性`currentSong`来获取当前歌曲的信息。
在`mounted`钩子函数中，我们创建了
一个`Audio`对象，并添加了`timeupdate`和`ended`事件的监听器，分别用于更新当前播放时间和切换到下一首歌曲。我们还调用了`loadSong`方法来加载当前歌曲信息，并将歌曲时长设置为`duration`属性的值。
在`methods`属性中，我们定义了一些方法来控制
音乐播放器的行为。`loadSong`方法用于加载当前歌曲信息，`togglePlay`方法用于切换播放状态，`updateTime`方法用于更新当前播放时间和进度条，`nextSong`方法用于切换到下一首歌曲。
最后，我们在模板中使用了一些
Vue.js的指令和事件监听器，来渲染
音乐播放器的界面并控制其行为。
以上就是
一个简单的基于
Vue.js的
音乐播放器示例，您可以根据自己的需求进行修改和扩展。
扫一扫
615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
