博客音乐播放器怎么样？最好的本地音乐播放器是什么？ 世界新要闻

最近这段时间总有小伙伴问小编博客音乐播放器（最好的本地音乐播放器）是什么，小编为此在网上搜寻了一些有关于博客音乐播放器（最好的本地音乐播放器）的知识送给大家，希望能解答各位小伙伴的疑惑。

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

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

(相关资料图)

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

效果展示

有人就说了，添加个音乐播放器还不很容易吗？添加个

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

也挺简洁的哈！！

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

网易云音乐外链播放器

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

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

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

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

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

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

这可比

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

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

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

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

实现功能

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

布局

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

样式

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

JS部分

思路就是，点击按钮后，创建一个

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

2、然后写一下怎么在页面创建

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，欢迎学习交流的小伙伴过来一起学习交流。