JS+html5制作简单音乐播放器

本教程为大家分享了JS音乐播放器的具体代码，供大家参考，具体内容如下

1.HTML

<audio> 标签定义声音，比如音乐或其他音频流。其主要属性有src:要播放的音频的 URL,controls:如果出现该属性，则向用户显示控件，比如播放按钮。

几个主要的标签如下：

<div>  
 <h4 id="name">李玉刚 - 刚好遇见你</h4> 
 <br> 
<audio id="audio" src="F:\KuGou\李玉刚 - 刚好遇见你.mp3 " controls></audio><br/> 
</div> 
<br><br> 
<div> 
<button id="btn-play" >播放</button> 
<button id="btn-stop" >暂停</button> 
<button id="btn-pre" >上一首</button> 
<button id="btn-next" >下一首</button> 
</div> 
</div>

这里不提供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 # 音乐播放器 # js仿微信语音播放实现思路 # JavaScript实现简单音乐播放器 # js实现音乐播放控制条 # js制作简单的音乐播放器的示例代码 # js实现音乐播放器 # js+audio实现音乐播放器 # JavaScript中播放音频文件的几种常用方法 # 一首 # 遇见你 # 播放器 # 朴树 # 几个 # 之路 # 或其他 # 大家分享 # 其主要 # 只做 # 具体内容 # 大家多多 # 就可以 # src # controls # URL # gt # innerHTML # brush # xhtml

返回目录在线咨询

上一篇：Django集成JavaScript游戏分数：AJAX提交指南
下一篇：如何检测并确认我的网站是否遭受了DDoS攻击？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

JS+html5制作简单音乐播放器

您的项目需求