单页介绍
音乐播放器功能也不多,也是基础功能.带有播放/暂停/音量调节/鼠标点击快进等基础播放功能!配色方面是白色打底,粉色点缀的!
使用说明
你可以自定义图标按钮的大小，使用的是CSS伪类，所以直接用font-size来控制大小即可！可以自定义按钮的颜色以及控制条颜色，总之就是所有颜色和组件的大小都可以通过CSS来控制！
引入文件
<link rel="stylesheet" href="css/audio-player.css" />
<script>
(function (doc) {
var addEvent = 'addEventListener',
type = 'gesturestart',
qsa = 'querySelectorAll',
scales = [1, 1],
meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];
function fix() {
meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
doc.removeEventListener(type, fix, true);
}
if ((meta = meta[meta.length - 1]) && addEvent in doc) {
fix();
scales = [.25, 1.6];
doc[addEvent](type, fix, true);
}
}(document));
</script>
<!-- 以上内容需要引入在网站顶部 head 部分内即可 -->
<script src="js/jquery.min.js"></script>
<script src="js/audio-player.js"></script>
<script>
$(function () {
$('audio').audioPlayer();
});
</script>
<!-- 以上内容需要引入在网站底部，不能放在播放器代码前面，否则不生效 -->添加播放器
<!-- 三个格式是兼容不同的浏览器和平台，一般只写一个MP3就行了 -->
<audio src="music.mp3" preload="auto" controls autoplay loop></audio>
<audio src="music.ogg" preload="auto" controls autoplay loop></audio>
<audio src="music.wav" preload="auto" controls autoplay loop></audio>播放器展示
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。