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>