分享一个动态简约网站音乐播放器
本帖最后由 暗影月狐 于 2018-5-14 10:41 编辑1. 音乐开始播放后，能够一直随机播放，直到暂停按钮被点击。
2. 默认是自动开始播放音乐，同时切换小人图片，再同时弹出一个播放框（基于Boostrap弹出框）。
3. 音乐播放时，可点击小人显示/隐藏播放框（小人图片不会改成）。
4. 新增一个播放框，显示歌曲名，增加暂停音乐、播放音乐、切换歌曲按钮。
5. 音乐暂停时，可点击小人关闭播放框，同时切换小人图片。
6. 播放框显示歌曲名，播放的歌曲改变时，自动改变显示的歌曲名。
7.然后，可以手动切换歌曲了…..
首先下载底部的那个压缩包，解压上传到你网站的根目录。
打开player_music目录下的music.js，编辑，如下图所示
我提供的歌曲外链都是我自己的，然后我开了防盗链，所以你们是用不了的（也就是直接用的话是不会放音乐的），需要你们自己手动添加歌曲和歌名（这个确实麻烦，或许以后会改进吧）。按图里那样操作就行了，还有就是它们两边的引号是不能删的。
成品可以去：www.lailal.cn 进行在线体验。（现在备案掉了暂时进不去）
如果你的网站是基于Bootstrap开发的的话，你可以直接使用以下代码
之前在博客分享过，顺道搬过来而已。希望各位大佬不要嫌弃！
<link href="/player_music/music.css" rel="stylesheet"/><div id="audio" class="music" data-original-title="飞狐音乐" data-container="body" data-toggle="popover" data-placement="left" data-html="true" data-content='<center><img src="/player_music/8.png" width="30px" height="30px" id="o"><img src="/player_music/1.png" width="32px" height="32px" id="m"><img src="/player_music/3.png" width="30px" height="30px" id="n"></center>'>
<img src="/player_music/233.gif"title="飞狐灵动网站音乐播放器为您服务_www.lailal.com" width="60px" height="60px" id="d">
</div>
<audio id="music" src="" controls="controls" autoplay="autoplay" hidden></audio>
<script src="/player_music/jquery.min.js"></script>
<script src="/player_music/bootstrap.min.js"></script>
<script src="/player_music/music.js"></script>
**** Hidden Message *****
66666666666 感谢大佬分享666666 66666666666 3333333333333 66666666666666666666666666666 66666666666666666666666 路过看看。。。。。。。。。。。。 {:4_86:}{:4_86:}{:4_102:}{:4_102:} {:4_86:}