带封面的HTML5手机音频播放器_html5_音频_音乐_播放器

本文演示了三种不同样式的html5音频播放器，通过html5的audio标签，使其支持自定义歌名、歌手和歌词，是否自动播放，音乐封面图，播放进度等

淘建站为您提供更多_html5_音频_音乐_播放器，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 289 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：html5 > 音频难易程度：初级

引入APlayer插件

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

播放器html代码

<div id="player" class="aplayer"></div>

1、默认样式

ap1.init();
var ap2 = new APlayer({
    element: document.getElementById('player'),
    narrow: true,
    autoplay: false,
    showlrc: false,
    music: {
        title: 'Preparation',
        author: 'Hans Zimmer/Richard Harvey',
        url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
        pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
    }
});

2、自动播放并显示歌词

ap2.init();
var ap3 = new APlayer({
    element: document.getElementById('player'),
    narrow: false,
    autoplay: true,
    showlrc: true,
    music: {
        title: '平凡之路',
        author: '朴树',
        url: 'http://7xifn9.com1.z0.glb.clouddn.com/平凡之路.mp3',
        pic: 'http://7xifn9.com1.z0.glb.clouddn.com/平凡之路.jpg'
    }
});

3、只显示缩略图和播放按钮

var ap1 = new APlayer({
    element: document.getElementById('player'),
    narrow: false,
    autoplay: false,
    showlrc: false,
    music: {
        title: 'Preparation',
        author: 'Hans Zimmer/Richard Harvey',
        url: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.mp3',
        pic: 'http://7xifn9.com1.z0.glb.clouddn.com/Preparation.jpg'
    }
});

参数	描述	默认值
APlayer参数设置
element	被绑定的palyer对象	-
narrow	是否使用窄屏模式（只显示缩略图和播放按钮），请看演示demo中的样式3	-
autoplay	是否自动播放	-
showlrc	是否展示歌词，请看演示demo中的样式一。	-
music	设置autoplay默认参数，title标题，author作者，url播放文件地址，pic播放器封面图。	-