分享一个动态简约网站音乐播放器

李木晚晚

1. 音乐开始播放后，能够一直随机播放，直到暂停按钮被点击。

2. 默认是自动开始播放音乐，同时切换小人图片，再同时弹出一个播放框（基于Boostrap弹出框）。

3. 音乐播放时，可点击小人显示/隐藏播放框（小人图片不会改成）。

4. 新增一个播放框，显示歌曲名，增加暂停音乐、播放音乐、切换歌曲按钮。

5. 音乐暂停时，可点击小人关闭播放框，同时切换小人图片。

6. 播放框显示歌曲名，播放的歌曲改变时，自动改变显示的歌曲名。

7.  然后，可以手动切换歌曲了…..

首先下载底部的那个压缩包，解压上传到你网站的根目录。

打开player_music目录下的music.js，编辑，如下图所示

我提供的歌曲外链都是我自己的，然后我开了防盗链，所以你们是用不了的（也就是直接用的话是不会放音乐的），需要你们自己手动添加歌曲和歌名（这个确实麻烦，或许以后会改进吧）。按图里那样操作就行了，还有就是它们两边的引号是不能删的。

成品可以去：www.lailal.cn 进行在线体验。（现在备案掉了暂时进不去）

如果你的网站是基于Bootstrap开发的的话，你可以直接使用以下代码

之前在博客分享过，顺道搬过来而已。希望各位大佬不要嫌弃！

[mw_shl_code=html,true]<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>[/mw_shl_code]

游客，如果您要查看本帖隐藏内容请回复

yangkun12345678

666666666666666666

lisheng

任何的东风浩荡

妙哉

感谢大佬分享666666

sywldddsaf

看看 是不是OK的

kunbfd

6666666666666666666

yangkun

666666666666666666666666

jinshen888

ylflz

来看一下是什么好东东

aifni

f257