李玉刚 - 刚好遇见你 
 
 

 
 


 
 
播放  
暂停  
上一首  
下一首  
 

这里不提供CSS样式，只做功能说明。

2.js

var btn1 = document.getElementById("btn-play"); 
  btn1.onclick = function(){ 
     if(audio.paused){          
      audio.play(); 
    } 
  } 
 
 
var btn2 = document.getElementById("btn-stop"); 
  btn2.onclick = function(){ 
     if(audio.played){          
      audio.pause(); 
    } 
  } 
   
var music = new Array(); 
music = ["李玉刚 - 刚好遇见你","张杰 - 三生三世","朴树 - 平凡之路"];//歌单 
var num = 0; 
var name = document.getElementById("name"); 
 
 
 
var btn3 = document.getElementById("btn-pre"); 
btn3.onclick = function(){ 
    num = (num +2)%3; 
    audio.src = "music/"+music[num]+".mp3"; 
    name.innerHTML = music[num]; 
    audio.play(); 
  } 
   
 
var btn4 = document.getElementById("btn-next"); 
btn4.onclick = function(){ 
    num = (num +1)%3; 
    audio.src = "music/"+music[num]+".mp3"; 
    name.innerHTML = music[num]; 
    audio.play(); 
  }

这样就可以控制audio播放器的播放，暂停，上一首和下一首功能了。

以上是“JS+html5如果制作简单音乐播放器”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。