用JavaScript实现简易的网页音乐播放器
最近疫情在家，利用这段时间开始自学HTML等内容，目前在写自己的个人主页，想用音乐来给自己的主页增添点特色。
一开始单纯用audio标签添加音乐，带上autoplay和loop属性，但在让朋友测试这个页面的时候遇到了问题：
这个问题意味着，Safari在没有用户操作的情况下不会自动播放所插入的音乐，也就是说autoplay是没有用的，但是audio自带的control又不是很美观，左上角放个控制的模块也不太和谐。
为了解决所有浏览器都能正常播放，那我直接做一个简单的音乐播放器就好了。
我在网上也搜索过很多方法，但很多方法对初入门者指引不太明显，而且我也有一点点自己的审美要求，所以在这里给大家分享我的最后综合网上的办法得出来的一个简单的音乐播放器，话不多说，先上代码：
JavaScript代码：
function playPause() {
var music = document.getElementById('music');
var music_btn = document.getElementById('music-btn');
if (music.paused){
music.play();
music_btn.src='pause.png';
}
else {
music.pause();
music_btn.src='play.png';
}
}//播放和暂停合一，默认是打开页面点击播放，点击后播放键就会变为暂停键
//这里只是我想二合一，其实可以分开的，原理一样，把两个判断分到两个按钮，写两个function就ok啦
var music1 = new Array();
music1 = ["笑场.mp3",
"刚刚好.mp3",
"陪你去流浪.mp3",
"哑巴.mp3",
"怪咖.mp3"];//用数组存储所有歌曲的路径
//如果是本地的音乐，就写本地的路径，如果你使用了云存储，就把url放在这里就好了
var num=0;
var n=music1.length;//获取数组的长度
function lastmusic() {
num = (num+n-1)%n;
music.src = music1[num];
music.play();
}//切上一首歌
function nextmusic() {
num = (num+1)%n;
music.src = music1[num];
music.play();
}//切下一首歌
window.onload=function () {
music.addEventListener('ended', function () {
nextmusic();
},false)
}//自动连播功能，监听播放情况，结束之后就调用下一首歌的函数
HTML代码：
<audio preload id='music'><source src="笑场.mp3"></audio>
<a href="javascript:lastmusic()"><img src="previous.png" width="96" height="96" border="0"></a>
<a href="javascript:playPause()"><img src="play.png" width="96" height="96" id="music-btn" border="0"></a>
<a href="javascript:nextmusic()"><img src="next.png" width="96" height="96" border="0"></a>
//插入图片且引用上面的函数，实现功能
在这里我结合了几个点：
- 按键二合一，且在按的时候会变化，播放变暂停，暂停变播放（此处是参考了网上的方案）。
- 在数组部分，网上的方法都是只存名字，然后在function的src末尾加了".mp3"，从而实现切歌，这种方法对本地文件的确适用，但是对于使用OSS对象存储直接只有一个链接，现在改为直接存地址，就可以适用OSS了。
- 用a标签调用js，可以使按键更美观，就不像button标签那样，就算插入图标，也会有一圈外框框，不太好看。
- 关于自动连播那里，网上的教程是直接告诉你用addEventListener，但是你直接加在进去是不行的，会报错，大意为获取不到对象，网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，加入window.onload则可以在文档加载后再触发，可避免报错。
实现效果：
播放：
暂停：
在这里的图标用的是谷歌的material design，开源的，大家可以上网搜索，或者自己画图标替换。
最后的话:
初学者可能对更深层的原理认知还不到位，有错漏请大家评论指正！这篇文章也是将网上的教程大概整合一下，方便更多初学者能够更快地看懂理解，与君共勉！一起学习！
