原生JS实现音乐播放器

2024-09-28 19:07:20

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

首先，使用HTML搭好我们的框架结构。这一步为了提高我们代码的可读性，多写注释。

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>原生JS音乐播放器</title>
 <link rel="stylesheet" href="css/public.css" >
 <link rel="stylesheet" href="css/css.css" >
 </head>
 <body>
 <!-- 音乐播放器 -->
 <div class="music">
 <!-- 歌曲信息 -->
 <div class="word">
 <div class="clears"></div>
 <!-- 歌曲封面 -->
 <div class="img">
 <img src="images/1.jpg" id="img" alt="" /></div>
 <!-- 歌曲封面 end -->
 </div>
 <!-- 歌曲信息 end -->
 <!-- 信息和音量 -->
 <div class="mtv">
 <!-- 文字信息 -->
 <div class="text">
 <h1 id="sName">歌曲名称</h1>
 <h2 id="singer">歌手</h2>
 </div>
 <!-- 文字信息 end -->
 <!-- 音量控制 -->
 <div class="vol01">
 <div class="volTop" id="volText">
 100%
 </div>
 <div class="volBottom">
 <div class="volPro" id="vol">
 <div class="volColor" id="volCol"></div>
 <div class="volBlock" id="volB"></div>
 </div>
 <div class="vImg">
 <img src="images/音量.png" alt="" />
 </div>
 </div>
 </div>
 <!-- 音量控制 end -->
 </div>
 <!-- 信息和音量 end -->
 <!-- 进度条 -->
 <div class="progress">
 <span class="cTime time" id="cTime">00:00</span> <!-- 当前时间 -->
 <span class="tTime time" id="tTime">00:00</span> <!-- 总的时间 -->
 <div class="clears"></div>
 <!-- 进度条小 -->
 <div class="proBar" id="songPro">
 <div class="proColor" id="proBar"></div>
 </div>
 <!-- 进度条小 end -->
 </div>
 <!-- 进度条 end -->
 <!-- 控制按钮 -->
 <div class="ctrls">
 <div class="btn">
 <img src="images/prev.png" class="prevBtn" id="prevBtn" alt="" />
 <img src="images/next.png" class="nextPrev" id="nextBtn" alt="" />
 </div>
 <button type="button" class="playBtn" id="playBtn"><img src="images/播放.png" alt="" /></button>
 </div>
 <!-- 控制按钮 end -->
 <audio src="#" id="music"></audio>
 </div>
 <!-- 音乐播放器 end -->
 <script src="js/js.js"></script>
 </body>
</html>

第二步，搭好框架后，就用CSS给他写上你喜欢的样式。注意这里我是将样式分为了公共样式和独立样式分开写的，提高代码可重复利用，当然你也可以使用SASS更方便，这里我只提供了独立样式，公共样式可以在网上自主寻找。

html {
 background: #92b991;
}

.music {
 width: 670px;
 height: 400px;
 background: url("../images/bg.jpg") no-repeat center;
 margin-left: auto;
 margin-right: auto;
 border: 1px #3d5e59 solid;
 margin-top: 150px;
 border-radius: 20px;
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
 position: relative;
}

.img {
 width: 200px;
 height: 200px;
 border: 2px #fff solid;
 overflow: hidden;
 border-radius: 100%;
 margin-top: 50px;
 margin-left: 35%;
}

.mtv {
 width: 670px;
 position: relative;
}

.text {
 color: #fff;
 margin-right: 30px;
 margin-left: 30px;
 margin-bottom: 10px;
}

.text>h1 {
 font-size: 24px;
 line-height: 30px;
 font-weight: normal;
}

.text>h2 {
 font-family: "Microsoft YaHei";
 font-size: 14px;
 font-weight: 300;
 line-height: 1.7;
}

.vol01 {
 position: absolute;
 height: 30px;
 width: 120px;
 right: 30px;
 top: -8%;
}

.volPro {
 width: 100%;
 height: 5px;
 margin-top: 44.5px;
 border: 1px #fff solid;
 border-radius: 5px;
}

.volColor {
 height: 5px;
 width: 100%;
 color: #fff;
 pointer-events: none;
}

.volBlock {
 pointer-events: none;
 position: absolute;
 top: 42px;
 width: 10px;
 height: 10px;
 border: 1px #fff solid;
 background: #f4f3f3;
 border-radius: 100%;
 left: 100%;
 margin-left: -5px;
}

.volTop {
 color: #fff;
 font-size: 10px;
 position: absolute;
 top: 25px;
 right: 0;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.vImg {
 position: absolute;
 top: 38px;
 left: -26px;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.time {
 font-family: "Microsoft YaHei";
 font-size: 10px;
 line-height: 1.5;
 color: #fff;
 margin-top: 25px;
}

.cTime {
 float: left;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.tTime {
 float: right;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.progress {
 margin-left: 30px;
 margin-right: 30px;
}

.proBar {
 width: 100%;
 height: 2px;
 overflow: hidden;
 background: #B292FF;
 margin-top: 5px;
 border-radius: 5px;
}

.proColor {
 height: 7px;
 width: 30%;
 background: #fff;
 pointer-events: none;
}

.ctrls {
 text-align: center;
 margin-top: 20px;
 margin-left: 30px;
 margin-right: 30px;
}

.btn {
 position: absolute;
 top: 50px;
}

.nextPrev {
 right: 0;
 margin-left: 200px;
 opacity: 0.1;
 transition: all 0.3s;
}

.nextPrev:hover {
 opacity: 0.5;
}

.prevBtn {
 left: 0;
 opacity: 0.1;
 transition: all 0.3s;
}

.prevBtn:hover {
 opacity: 0.5;
}

.playBtn {
 height: 200px;
 width: 200px;
 border-radius: 200px;
 opacity: 0.3;
 position: absolute;
 top: 52px;
 left: 250px;
 margin-left: -14px;
 transition: all 0.3s;
}

.playBtn:hover {
 opacity: 0.5;
 background: #46847b;
}

第三步，也是让音乐播放器具有灵魂的东西，使用JS添加功能。

1.获取ID（当然这里也可以获取类名或是元素，看你自己的习惯）。

let music = document.getElementById("music");
let playBtn = document.getElementById("playBtn");
let prevBtn = document.getElementById("prevBtn");
let nextBtn = document.getElementById("nextBtn");
let img = document.getElementById("img");
let sName = document.getElementById("sName");
let singer = document.getElementById("singer");
let tTime = document.getElementById("tTime");
let proBar = document.getElementById("proBar");
let cTime = document.getElementById("cTime");
let songPro = document.getElementById("songPro");
let vol = document.getElementById("vol");
let volCol = document.getElementById("volCol");
let volB = document.getElementById("volB");
let volText = document.getElementById("volText");

2.添加音乐播放功能。

导入音乐

let songs = [{
 mp3: "music/01.mp3",
 singer: "赵薇",
 name: "不能和你分手",
 img: "images/1.jpg"
 }, {
 mp3: "music/04.mp3",
 singer: "陈粒",
 name: "易燃易爆炸",
 img: "images/2.jpg"
 }, {
 mp3: "music/06.mp3",
 singer: "胡夏/郁可唯",
 name: "知否知否",
 img: "images/3.jpg"
 }];

音乐播放

let changeMusic = function(index) {
 music.src = songs[index].mp3;
 img.src = songs[index].img;
 sName.innerHTML = songs[index].name;
 singer.innerHTML = songs[index].singer;
 proBar.style.width = 0;
 };

 let index = 0;
 changeMusic(index);

音乐播放暂停

playBtn.addEventListener("click", function(event) {
 if (music.paused) {
 music.play();
 event.currentTarget.innerHTML = '<img src="images/暂停.png" alt=""/>';
 } else {
 music.pause();
 event.currentTarget.innerHTML = '<img src="images/播放.png" alt=""/>';
 }
 });

音乐切换

prevBtn.addEventListener("click", function(event) { //上一首
 index--;
 if (index <= -1) {
 index = songs.length - 1;
 }
 changeMusic(index);
 });

 nextBtn.addEventListener("click", function(event) { //下一首
 index++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 });

 music.addEventListener('ended',function () { //自动播放下一首
 index++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 })

3.添加进度条。

music.addEventListener("loadedmetadata", function(event) { //提示音频的元数据已加载
 tTime.innerHTML = parseInt(music.duration / 60) + ":" + parseInt(music.duration % 60);
 });

 music.addEventListener("timeupdate", function(event) { //监听音乐事实播放事件
 let jd = music.currentTime / music.duration;
 let bfb = jd * 100 + "%";
 proBar.style.width = bfb;
 if (music.currentTime < 10) {
 cTime.innerHTML = "0:0" + Math.floor(music.currentTime);
 } else if (music.currentTime < 60) {
 cTime.innerHTML = "0:" + Math.floor(music.currentTime);
 } else {
 let minet = parseInt(music.currentTime / 60);
 let sec = music.currentTime - minet * 60;
 if (sec < 10) {
 cTime.innerHTML = "0" + minet + ":" + "0" + parseInt(sec);
 } else {
 cTime.innerHTML = "0" + minet + ":" + parseInt(sec);
 }
 }
 });

小功能：点击进度条，音乐也跟着变化跳转到指定的时间。

songPro.addEventListener("click", function(event) {
 let x = event.offsetX;
 let bfb = x / 610 * 100;
 proBar.style.width = bfb + "%";
 music.currentTime = music.duration * bfb / 100;
 });

4.添加音量调节模块。

let getBfb = function(event) {
 let x = event.clientX; //返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
 let volX = vol.getBoundingClientRect().x;  //getBoundingClientRect()获取元素的宽高位置
 let disX = x - volX;
 disX = Math.max(0, disX); //返回最大数字
 disX = Math.min(120, disX); //返回最小数字
 return disX / 120;
 };

 let setVol = function(event) {
 let bfb = Math.floor(getBfb(event) * 10000) / 100;
 volCol.style.width = bfb + "%";
 volB.style.left = bfb + "%";
 volText.innerHTML = Math.floor(bfb) + "%";
 music.volume = bfb / 100;
 };

 vol.addEventListener("mousedown", function() {
 document.addEventListener("mousemove", setVol);
 });
 document.addEventListener("mouseup", function() {
 document.removeEventListener("mousemove", setVol);

 });

全部JS代码

这里我使用了{}作用域，让let 或 const声明的变量只在 let 或 const命令所在的代码块 {} 内有效，在 {} 之外不能访问（ECMAScript 6(简称ES6)中新增的）。

{
 let music = document.getElementById("music");
 let playBtn = document.getElementById("playBtn");
 let prevBtn = document.getElementById("prevBtn");
 let nextBtn = document.getElementById("nextBtn");
 let img = document.getElementById("img");
 let sName = document.getElementById("sName");
 let singer = document.getElementById("singer");
 let tTime = document.getElementById("tTime");
 let proBar = document.getElementById("proBar");
 let cTime = document.getElementById("cTime");
 let songPro = document.getElementById("songPro");
 let vol = document.getElementById("vol");
 let volCol = document.getElementById("volCol");
 let volB = document.getElementById("volB");
 let volText = document.getElementById("volText");

 let songs = [{
 mp3: "music/01.mp3",
 singer: "赵薇",
 name: "不能和你分手",
 img: "images/1.jpg"
 }, {
 mp3: "music/04.mp3",
 singer: "陈粒",
 name: "易燃易爆炸",
 img: "images/2.jpg"
 }, {
 mp3: "music/06.mp3",
 singer: "胡夏/谭维维",
 name: "知否知否",
 img: "images/3.jpg"
 }];

 let changeMusic = function(index) {
 music.src = songs[index].mp3;
 img.src = songs[index].img;
 sName.innerHTML = songs[index].name;
 singer.innerHTML = songs[index].singer;
 proBar.style.width = 0;
 };

 let index = 0;
 changeMusic(index);

 playBtn.addEventListener("click", function(event) {
 if (music.paused) {
 music.play();
 event.currentTarget.innerHTML = '<img src="images/暂停.png" alt=""/>';
 } else {
 music.pause();
 event.currentTarget.innerHTML = '<img src="images/播放.png" alt=""/>';
 }
 });

 prevBtn.addEventListener("click", function(event) { //上一首
 index--;
 if (index <= -1) {
 index = songs.length - 1;
 }
 changeMusic(index);
 });

 nextBtn.addEventListener("click", function(event) { //下一首
 index++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 });

 music.addEventListener('ended',function () { //自动播放下一首
 index++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 })

 music.addEventListener("loadedmetadata", function(event) { //提示音频的元数据已加载
 tTime.innerHTML = parseInt(music.duration / 60) + ":" + parseInt(music.duration % 60);
 });

 music.addEventListener("timeupdate", function(event) { //监听音乐事实播放事件
 let jd = music.currentTime / music.duration; //music.duration总时长 music.currentTime 当前时长
 let bfb = jd * 100 + "%";
 proBar.style.width = bfb;
 if (music.currentTime < 10) {
 cTime.innerHTML = "0:0" + Math.floor(music.currentTime); //Math.floor()向下取整
 } else if (music.currentTime < 60) {
 cTime.innerHTML = "0:" + Math.floor(music.currentTime);
 } else {
 let minet = parseInt(music.currentTime / 60); //parseInt()解析一个字符串，并返回一个整数
 let sec = music.currentTime - minet * 60;
 if (sec < 10) {
 cTime.innerHTML = "0" + minet + ":" + "0" + parseInt(sec);
 } else {
 cTime.innerHTML = "0" + minet + ":" + parseInt(sec);
 }
 }
 });

 songPro.addEventListener("click", function(event) {
 let x = event.offsetX;
 let bfb = x / 610 * 100;
 proBar.style.width = bfb + "%";
 music.currentTime = music.duration * bfb / 100;
 });

 let getBfb = function(event) {
 let x = event.clientX; //返回当事件被触发时鼠标指针向对于浏览器页面（或客户区）的水平坐标。
 let volX = vol.getBoundingClientRect().x;  //getBoundingClientRect()获取元素的宽高位置
 let disX = x - volX;
 disX = Math.max(0, disX); //返回最大数字
 disX = Math.min(120, disX); //返回最小数字
 return disX / 120;
 };

 let setVol = function(event) {
 let bfb = Math.floor(getBfb(event) * 10000) / 100;
 volCol.style.width = bfb + "%";
 volB.style.left = bfb + "%";
 volText.innerHTML = Math.floor(bfb) + "%";
 music.volume = bfb / 100;
 };

 vol.addEventListener("mousedown", function() {
 document.addEventListener("mousemove", setVol);
 });
 document.addEventListener("mouseup", function() {
 document.removeEventListener("mousemove", setVol);

 });
}

最终效果展示：

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

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教你轻松制作html音乐播放器

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

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

一.设计目的: 1.随着现在人民生活质量的提高同样伴随着生活压力的增大,越来越多的人追求越来越多的娱乐,其中一种娱乐方式就是音乐,于是突发奇想,制作一个音乐播放器. 2.主要功能: 1 支持循环自动播放 2 支持图片的旋转 3 支持调整播放的位置,以及调整声音的大小 4 歌词滚动效果 5 每秒显示音乐的播放时间二 .设计思路: 1.向浏览器中添加背景音乐: 首先应该向网页中添加几首好听的背景音乐.添加音乐有,两种方式可以用一个audo标签,这样应该把音乐的地址存放到一个数组中,第二种方式是,有
JavaScript实现简单音乐播放器

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

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

晚上要考软件工程,实在不想复习.写个播放器吧,这个只是个用来学习的小Demo,众多不完善之处,下面贴出源代码,如果要转载,请加上版权声明 PS:因为Ajax涉及到跨域获取天气信息,有两个版本,一个是直接跨域,IE10支持,其他的浏览器要改配置.另一个是服务器端的weather.php,获取天气信息返回json. weather.php就不写了,里面的对应路径存放对应的文件演示地址: http://569375.ichengyun.net/fm/ 实现功能:音乐播放,进度调节(滑动模块),音量条
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器

本文实例讲述了js实现可兼容IE.FF.Chrome.Opera及Safari的音乐播放器.分享给大家供大家参考.具体实现方法如下: /** 音乐播放器 * @param obj 播放器id * @param file 音频文件 mp3: ogg: * @param loop 是否循环 */ function audioplayer(id, file, loop){ var audioplayer = document.getElementById(id); if(audioplayer!=nu
原生JS实现小小的音乐播放器

前言最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的旋转 3.支持点击进度条调整播放的位置,以及调整音量 4.显示音乐的播放时间 5.支持切歌:上一首.下一首.点击歌名切歌:暂停播放等~ 添加音乐有两种方式: ①可以用一个audo标签,这样应该把音乐的地址存放到一个数组中: ②第二种方式是,有几首歌就添加几个audo标签,然后获取所有的背景音乐(示例中我们先添加三首音乐,放到
JS+html5制作简单音乐播放器

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

原生JS实现音乐播放器

相关推荐

随机推荐