NiceLeeのBlog 用爱发电 bilibili~

前端 一个简单的音乐播放器

2018-10-23
nIceLee

阅读:


APlayer.js迷你音乐播放器插件是一款小型的网页音乐播放器代码,支持歌词滚动,带播放进度条和声音控制,暂停播放等功能。 话不多说,先上效果图:

html - 插入一个class为aplayer的div

<div id="player1" title="战" author="排骨教主" pic="pics/war.jpg" src="music/war.mp3" class="aplayer"></div>

css - 引用APlayer.min.css即可

<link rel="stylesheet" href="/css/APlayer.min.css">

js - 引用APlayer.min.js即可

<script src="/js/APlayer.min.js"></script> 
<script>
var getDom=document.getElementsByClassName("aplayer");
for(var i=0;i<getDom.length;i++){//遍历网页中所有播放器
	var ap1 = new APlayer({
		element: getDom[i],
		narrow: false,
		autoplay: false,
		showlrc: false,
		music: {
			title: getDom[i].getAttribute("title"),
			author: getDom[i].getAttribute("author"),
			url: getDom[i].getAttribute("src"),
			pic: getDom[i].getAttribute("pic")
		}
	});
	ap1.init(); 
}
</script>

内容
隐藏