vue-aplayer
插件也可以实现音乐播放和歌词滚动,但是只有对应的Vue2.x
版本
npm下载aplayer插件
npm install aplayer --save
下载hls.js:
npm install hls.js --save
<template>
<!-- 准备一个容器用来存放音乐播放器 -->
<div id="aplayer"></div>
</template>
<script setup>
import APlayer from "aplayer"; // 引入音乐插件
import "aplayer/dist/APlayer.min.css"; // 引入音乐插件的样式
import { ref, onMounted } from "vue";
// 歌曲列表
const audio = ref([
{
name: "如愿", // 歌曲名称
artist: "王菲", // 歌曲作者
// 歌曲url地址
url: "http://m701.music.126.net/20240118221322/9997baaa0693a055267b528cf28ef375/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/11311694172/21d2/d4cb/6742/f3ed5c3de392bdd095a4f8d437b65b6b.m4a",
// 歌曲封面
cover:
"http://p1.music.126.net/zfdCU3cL-dsTqVvjmKPrjg==/109951169222823883.jpg",
// 歌词
lrc: "",
// 主题
theme: "rgb(61, 162, 230)",
},
{
name: "如愿", // 歌曲名称
artist: "王菲", // 歌曲作者
// 歌曲url地址
url: "http://m701.music.126.net/20240118221322/9997baaa0693a055267b528cf28ef375/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/11311694172/21d2/d4cb/6742/f3ed5c3de392bdd095a4f8d437b65b6b.m4a",
// 歌曲封面
cover:
"http://imge.kugou.com/stdmusic/150/20200606/20200606220631519630.jpg",
// 歌词
lrc: "",
// 主题
theme: "rgb(61, 162, 230)",
},
]);
// 其他配置信息
const info = ref({
fixed: false, // 不开启吸底模式
listFolded: true, // 折叠歌曲列表
autoplay: true, // 开启自动播放
preload: "auto", // 自动预加载歌曲
loop: "all", // 播放循环模式、all全部循环 one单曲循环 none只播放一次
order: "list", // 播放模式,list列表播放, random随机播放
lrcType: 1, //使用js字符串格式加载歌词
});
const initAudio = () => {
// 创建一个音乐播放器实例,并挂载到DOM上,同时进行相关配置
const ap = new APlayer({
container: document.getElementById("aplayer"),
audio: audio.value, // 音乐信息
...info.value, // 其他配置信息
});
};
onMounted(() => {
// 初始化播放器
initAudio();
});
</script>