Implement simple web music player with JavaScript

Implement simple web music player with JavaScript

Recently epidemic at home, use this time began to teach himself HTML and other content, is currently writing their own personal home, I want to add features to their point home with the music.
Start with a simple add audio label music, to bring autoplay and loop properties, but in this test page to make friends when it came to the question:

This question implies, Safari will not play automatically inserted in the absence of operation of a user's music , that autoplay is of no use, but comes with audio control is not very beautiful, put the top left corner of the control module is not very harmonious.

In order to solve all browsers play correctly, then I directly make a simple music player just fine.

I have searched the Internet many methods, but many ways the guidelines are less clear for the early starters, but I also have a little bit of their own aesthetic demands, it was here to share my last comprehensive online way to get out of a simple music player, a man of few words said, the first on the code:

JavaScript code:

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 code:

<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>
//插入图片且引用上面的函数，实现功能

Here I combined a few points:

• Key combo, and will vary according to the time, the player becomes pause, pause, change playback (here is a reference to the online program).
• In the array part, online methods are only keep the name, and then at the end of the src function plus the ".mp3", in order to achieve the song, this method does apply to local files, but for the use of OSS object storage is only one link directly , now replaced by direct deposit address, you can apply the OSS.
• Tag with a call js, the keys can be made more attractive, as it is not button tag, even if the icon is inserted, there will be an outer circle of frame, not look good.
• About Auto Lianbo there, online tutorial is to tell you use addEventListener, but you are not directly added into it, and will complain to the effect that get less than the object, web page javaScript script code often need to be able to complete only after the document is loaded to perform, it may cause the situation can not obtain the object, adding window.onload can be triggered after the document is loaded, an error can be avoided.

Achieve results:

Play:

Pause:

the icon used here is Google's material design, open source, you can search the Internet, or draw your own icon replacement.

Last words:

Beginners might be a deeper awareness of the principles is not in place, errors and omissions comment please correct me! This article is about the integration of the online tutorial about, beginners can understand more easily understood more quickly, and the king of mutual encouragement! study together!