博客音乐播放器（最好的本地音乐播放器）

做程序员已经六年有余了，也在互联网上结实了很多程序员朋友，这几天老是有人问我怎么找工作的问题，前端工作已经越来越难找了，要求也提高了很多，但是还是那句话，这些都只针对弱者,靠前端吃饭的永远不愁工作。

这里还是要说一下我自己建的前端学习群：594959296，从我一个人到现在的1731个都是看我每一篇文章看我每一个案例来的，可以说都是我们大前端的学霸啊，不定期分享干货。想学到东西的都可以来，欢迎初学和进阶中的小伙伴

效果展示

有人就说了，添加个音乐播放器还不很容易吗？添加个<audio>标签不搞定了：

在网页中就会出现这个一个东西：

也挺简洁的哈！！

但是，如果是这样的话，我还有更好的选择：

网易云音乐外链播放器

1、打开网易云歌曲搜索链接；

2、搜一首你喜欢的歌，进入播放页面；

3、已经看到了吧，专辑封面下面出现了“生成外链播放器”，我们点进去就会出现：

4、好吧（尴尬！），我们换一首赵雷的 成都

5、点击 生成外链播放器 ，就会看到：

6、有 播放器尺寸、是否自动播放等功能可以选择，方框中会出现预览样式。选好后，把下面的代码放在你的页面中就可以了。。

这可比<audio>标签好看多了吧！但是很明显有几个缺点：

1、你已经看到了，并不是所有的音乐都可以用，有版权限制；

2、样式不能修改，可能与你页面的风格不符；

总之就是： 不能实现 充分的可定制性 。

自己动手丰衣足食，我们一起来写一个音乐播放器吧！！

实现功能

先说说做出来是什么效果吧。在页面中不出现播放器的样式，而是通过点击页面中某个元素触发，再次点击可以切换歌曲。就这些吧，具体做着再说。。

布局

其实并没有布局。页面只有一个按钮。

样式

强行加个样式，要对得起 强迫症 这个称号，一个按钮也要做的漂亮一点。

JS部分

思路就是，点击按钮后，创建一个<audio>标签添加到页面中。

1、要做音乐播放器，当然我们要有音乐才行。用一个数组来放音乐外链：

2、然后写一下怎么在页面创建<audio>标签吧。

3、写一下按钮的onclick事件：

现在点击按钮后audio标签就会被添加到页面中。但是歌曲并不会播放，因为它现在还是这个样子：

src并没有值，所以肯定不会播放了。

4、下面就来给src属性赋值吧。因为有三首歌曲，我们还要判断一下添加哪个外链。

先获取到刚才添加的audio标签，如果获取到了，取得index值，即当前播放的是第几首歌（从 0 开始）。

思考一下： 第一次点击 index = 0、第二次 index = 1、第三次 index = 2，这时我们的三首歌都播放过了，点击第四下时 index = 3，应该停止播放的，所以 songs = [] 中要有一个占位的 空元素 。当点第五次时，歌曲列表要重新循环，所以让此时的 index = 0。

逻辑还是很简单的。。

细节处理

1、点我们第一次点击按钮时，向页面中添加了一个audio标签，第二次点击时，就不必再次添加了，只需要修改src值就可以了。所以上面的代码要修改：

添加前先判断一下audio是否存在。

2、最后做一下简单的封装：

这就是一个完整的音乐播放器了。

3、调用其实就是执行go()函数，更新歌曲就修改一下songs[]数组就行了。。

今天的这个案例就写完了，希望大家能够学习到东西。

学习javascript也是有难度的，前提是你的html和css学的应该要很号，您不能连html这东东是干啥的都不知道就开始学javascript了，学乘除前，学好加减法总是有益无害的。

再说几点建议：

不要急着看一些复杂的javascript网页特效的代码，这样除了打击你的自信心，什么也学不到

看网上什么几天精通javascript的，直接跳过吧，会浪费你很多时间

这个案例就算做完了，想要完整代码自己练习的小伙伴进我的群自助领取，已经上传到群文件里了，群号：594959296，欢迎学习交流的小伙伴过来一起学习交流。

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频