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播放器的播放，暂停，上一首和下一首功能了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript实现音乐自动切换和轮播

    前言:前两天有个同学问我音乐自动切换,并在所有歌曲都播放完成以后实现循环播放的效果.自己折腾了一下做了出来,今天整理桌面的时候突然看见,在拖到回收站的一瞬间想着还是写一篇博客分享一下.实现的方法有很多种,我这里简单的实现. 通过修改video的src(这种应该是最好节省资源的) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

  • JavaScript实现带播放列表的音乐播放器实例分享

    代码较最基础的播放器实现增加了playlist,使用MakeList实现多首播放,有需要的可以直接使用: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • js控制网页背景音乐播放与停止的方法

    本文实例讲述了js控制网页背景音乐播放与停止的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • js仿百度音乐全选操作

    js仿百度音乐全选操作

    本文实例为大家分享了js全选操作的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{margin:0;padding:0;} ul{list-style:none;} #conten

  • Vuejs仿网易云音乐实现听歌及搜索功能

    Vuejs仿网易云音乐实现听歌及搜索功能

    前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用,但是后来发现数据流传输有点麻烦,后续会使用vuex. 技术栈 vue+vue-router(核心框架) better-scroll(使移动端滑动体验更加流畅) vue-lazyload(用户图片懒加载) nprogress(用于加载过渡) axios(请求) 功能分析与设计 首先我先参考了现有的一

  • js给网页加上背景音乐及选择音效的方法

    本文实例讲述了js给网页加上背景音乐及选择音效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>给网页加上背景音乐,选择音效功能</TITLE> <STYLE> <!--样式单 --> a{font-size:30pt;color:blue;font-family:Vineta BT} a:link{text-decoration:none;} a:hover{text-

  • js wmp操作代码小结(音乐连播功能)

    WMP-网页中常见属性和方法 <object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject" id="wmp" width="0" height="0" style="width:0px;height:0px;"></object> //基本属性

  • 运用js教你轻松制作html音乐播放器

    运用js教你轻松制作html音乐播放器

    用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦 效果图: 源码:html <span style="color:#999999;"><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>音乐播放器</title> <sc

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

    本教程为大家分享了JS音乐播放器的具体代码,供大家参考,具体内容如下 1.HTML <audio> 标签定义声音,比如音乐或其他音频流.其主要属性有src:要播放的音频的 URL,controls:如果出现该属性,则向用户显示控件,比如播放按钮. 几个主要的标签如下: <div> <h4 id="name">李玉刚 - 刚好遇见你</h4> <br> <audio id="audio" src=&qu

  • 原生JS实现网页手机音乐播放器 歌词同步播放的示例

    整了一下  之前写了好几次每一次都丢三落四的 今天花了半天理了下思路 整理了下头绪 //获取歌词文本 var txt = document.getElementById("lrc"); var lrc = txt.value;//获取文本域里的值 /*console.log(lrc);*/ var lrcArr = lrc.split("[");//去除[ /*console.log(lrcArr);*/ var html = "";//定义一个

  • 教你轻松制作Android音乐播放器

    教你轻松制作Android音乐播放器

    欣赏一下我们清爽的界面吧~ 如果是只用activity来制作这样的东西简直是太小儿科了,此处我们当然用的是service 首先我们先上service的代码: 1.如果我们要访问service的属性和方法,那么在activity肯定是以bindservice的方法实现的,而在service中的onbind方法也是必须要实现的,onbind返回的Ibinder对象在activity的serviceconnection中得到使用. 2.activity获取到Ibinder对象,可以进一步获取服务对象和

  • JS模拟酷狗音乐播放器收缩折叠关闭效果代码

    JS模拟酷狗音乐播放器收缩折叠关闭效果代码

    本文实例讲述了JS模拟酷狗音乐播放器收缩折叠关闭效果代码.分享给大家供大家参考,具体如下: 这是一款模拟酷狗音乐播放器的关闭特效,采用JavaScript实现,关闭的时候播放界面缩成一条线,然后消失,就像有些电视机突然停电的效果,很有意思的网页动画特效. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-kugou-music-player-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • Android实现简单音乐播放器(MediaPlayer)

    Android实现简单音乐播放器(MediaPlayer)

    Android实现简单音乐播放器(MediaPlayer),供大家参考,具体内容如下 开发工具:Andorid Studio 1.3 运行环境:Android 4.4 KitKat 工程内容 实现一个简单的音乐播放器,要求功能有: 播放.暂停功能: 进度条显示播放进度功能 拖动进度条改变进度功能: 后台播放功能: 停止功能: 退出功能: 代码实现 导入歌曲到手机SD卡的Music目录中,这里我导入了4首歌曲:仙剑六里面的<誓言成晖>.<剑客不能说>.<镜中人>和<

  • java实现简单音乐播放器

    本文实例为大家分享了java实现简单音乐播放器的具体代码,供大家参考,具体内容如下 主要是用到java中的swing技术,以及JMFjar中的API 备注:需要用JDK1.8才能播放音乐MP3 package baidu; import java.awt.*; import java.awt.event.*; import java.io.*; import java.util.*; import javax.swing.*; import javax.media.bean.playerbean

  • Java实现的简单音乐播放器功能示例

    Java实现的简单音乐播放器功能示例

    本文实例讲述了Java实现的简单音乐播放器功能.分享给大家供大家参考,具体如下: 应用名称:Java简单的音乐播放器 用到的知识:Java GUI编程,线程,IO 开发环境:win8+eclipse+jdk1.8 功能说明:可以选择内置的音乐文件播放,循环播放,停止.PS:这个播放器只能播放.au .aiff .wav .midi .rfm格式的音频. 效果图: 源代码: import java.applet.AudioClip; import java.awt.*; import java.n

  • js实现简单音乐播放器

    本文实例为大家分享了js实现音乐播放器的具体代码,供大家参考,具体内容如下 效果图: 可播放暂停继续播放,进度条可拖动,时间展示,声音调节 完整代码(直接拿来用) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>audio功能开发</title> <style> * { margin:0; padding:0 } .music-ra

  • JavaScript实现简单音乐播放器

    JavaScript实现简单音乐播放器

    该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. 这样看起来有点单调. 我们把它加在网页上试试. 具体效果可以去我的个人网站查看http://tcxqq.top 好了,成品已经展示了接下来,开干吧! <!DOCTYPE html> <html lang="en"> <head> <meta charset=

随机推荐