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

 更新时间:2020年09月13日 10:31:34   作者:lzc534650799  
这篇文章主要为大家详细介绍了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实现图片裁剪

    基于原生JS实现图片裁剪

    要进行图片编辑,最重要要能够对图片进行裁剪。主要的实现分成两部分,一部分是前端利用js进行裁剪区域选择,第二部分是利用PHP进行后台处理。现在就跟大家分享一下。
    2016-08-08
  • js实现非常简单的焦点图切换特效实例

    js实现非常简单的焦点图切换特效实例

    这篇文章主要介绍了js实现非常简单的焦点图切换特效,是一个非常简单的js焦点图切换效果,涉及javascript操作鼠标事件与图片的相关技巧,需要的朋友可以参考下
    2015-05-05
  • js函数柯里化的方法和作用实例分析

    js函数柯里化的方法和作用实例分析

    这篇文章主要介绍了js函数柯里化的方法和作用,结合实例形式分析了js函数柯里化的方法、功能及操作注意事项,需要的朋友可以参考下
    2020-04-04
  • JavaScript判断浏览器和hack滚动条的写法

    JavaScript判断浏览器和hack滚动条的写法

    这篇文章主要介绍了JavaScript判断浏览器和hack滚动条的写法,需要的朋友可以参考下
    2017-07-07
  • layer实现弹出层自动调节位置

    layer实现弹出层自动调节位置

    今天小编就为大家分享一篇layer实现弹出层自动调节位置,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • javascript中layim之查找好友查找群组

    javascript中layim之查找好友查找群组

    这篇文章主要介绍了javascript中layim之查找好友查找群组,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • Javascript中判断变量是数组还是对象(array还是object)

    Javascript中判断变量是数组还是对象(array还是object)

    怎样判断一个JavaScript变量是array还是obiect,或许有很多初学者对此不是很清楚吧,下面为大家详细解答下,希望对大家有所帮助
    2013-08-08
  • 原生js获取元素样式的简单方法

    原生js获取元素样式的简单方法

    下面小编就为大家带来一篇原生js获取元素样式的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JavaScript中Promise的使用详解

    JavaScript中Promise的使用详解

    Promise,相信每一个前端工程师都或多或少地在项目中都是用过,毕竟它早已不是一个新名词。ES6中已经原生对它加以支持,在caniuse中搜索一下 Promise ,发现新版的chrome和firefox也已经支持。但是低版本的浏览器我们可以使用 es6-promise 这个 polyfill 库来加以兼容。
    2017-02-02
  • 使用AJAX实现Web页面进度条的实例分享

    使用AJAX实现Web页面进度条的实例分享

    这篇文章主要介绍了使用AJAX实现Web页面进度条的实例分享,利用AJAX的异步来显示服务器端的处理进度是当下比较流行的做法,需要的朋友可以参考下
    2016-05-05

最新评论