html悬浮音乐播放器自动播放
时间: 2023-11-21 14:55:35 浏览: 113
以下是实现HTML悬浮音乐播放器自动播放的步骤:
1. 在HTML文件的header中添加以下代码,引入APlayer的CSS和JS文件:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
```
2. 在HTML文件的body中添加以下代码,创建一个id为“aplayer”的div,并设置相关属性:
```html
<div id="aplayer" class="aplayer" data-order="random" data-id="2044905443" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-volume="0.6"></div>
```
其中,data-id属性为音乐播放列表的ID,data-server属性为音乐来源,data-autoplay属性为自动播放,data-volume属性为音量大小。
3. 在JS文件中初始化APlayer:
```javascript
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: true,
audio: [{
name: '歌曲名',
artist: '歌手名',
url: '歌曲链接',
cover: '封面链接'
}]
});
```
其中,container属性为音乐播放器所在的div,fixed属性为是否固定在页面上,autoplay属性为是否自动播放,audio属性为音乐信息,包括歌曲名、歌手名、歌曲链接和封面链接。
阅读全文