Vue3+APlayer的小案例

最新推荐文章于 2025-03-30 09:17:34 发布

..南山忆..

最新推荐文章于 2025-03-30 09:17:34 发布

阅读量2.5k

点赞数 6

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_45961038/article/details/129013045

版权

1.找到中文官网 APlayer中文文档

2.在vue3项目中下载APlayer和hls.js

npm install aplayer --save

npm i hls.js --save

3.在需要使用插件的页面import

(这里注意官方文档import写的是import 'APlayer/dist/APlayer.min.css';，而打开我们node_modules文件夹发现其实下载文件夹名称是aplayer，首字母是小写的，因此这里需要改成import 'aplayer/dist/APlayer.min.css';，否则会报错找不到APlayer.min.css！！)
在这里插入图片描述

import 'aplayer/dist/APlayer.min.css';
import APlayer from 'aplayer';

4.在vue文件中写入代码

<template>
	<div id="aplayer"></div>
</template>
<script>
import 'aplayer/dist/APlayer.min.css';
import APlayer from 'aplayer';

export default {
  name: 'HomeView',
  components: {
  },
  mounted() {
	this.addMyAudio();
  },
  data(){
	return{
		 audio: [{
			name: "China-Y",//歌名
			artist: '徐梦圆',//歌手
			url: 'https://www.ytmp3.cn/down/59298.mp3down/39868.mp3',//音频文件地址
			cover: 'http://imge.kugou.com/stdmusic/150/20170815/20170815070007812976.jpg',//音乐封面地址
			lrc: ""// 歌词
		}]
	}
  },
  methods:{
	  addMyAudio() {
	        const ap = new APlayer({
	          container: document.getElementById("aplayer"),
	          audio: this.audio
	        })
		}
  }
}
</script>