Aplayer简介
Aplayer是一款小巧优雅的HTML5音乐播放器，你可以把它镶嵌在html中的各个地方。自然，你也可以把它插入你的博客中。
嵌入代码
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
<style>
.responsive-div {
width: 70%;
}
@media screen and (max-width: 768px) {
.responsive-div {
width: 100%;
}
}
</style>
</head>
<div class="responsive-div" id="aplayer"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
<script>
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: false, //是否附着页面底部，否为false
autoplay: false, //是否自动播放，否为false,移动端不能生效
loop: 'none', // 音频循环播放, 可选值: 'all', 'one', 'none'
volume: 0.6, //初始音量（0~1）
lrcType: 3, //歌词模式（1、HTML模式 2、js模式 3、lrc文件模式）
mutex: true, //互斥模式：阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
order: 'random', //音频循环顺序（'list'：顺序, 'random'：随机）
preload: 'none', //预加载（'none'：不预加载, 'metadata'：元数据, 'auto'：自动）
listFolded: false, //列表默认折叠，开启为true
theme: '#ee8243', //主题颜色
audio: [{
name: 'One Last You', //歌曲名称
artist: 'Jen Brid', //歌曲作者
url: 'https://991198.xyz/upload/Jen%20Bird%20-%20One%20Last%20You.mp3', //歌曲源文件地址
cover: 'https://991198.xyz/upload/xb2.jpg', //歌曲封面地址
lrc: 'https://991198.xyz/upload/OneLastYou.lrc', //歌曲的歌词文件
theme: '#eeeeee' //主题颜色（优先）
}]
});
</script>
上面代码的运行效果如下:
更多具体的播放设置请访问Aplayer官网。
评论区