Native JS music player

Native JS music player

This article example shares the specific code of JS to implement the music player for your reference. The specific content is as follows

First , use HTML to build our framework structure. In this step, in order to improve the readability of our code, write more comments.

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Native JS music player</title>
 <link rel="stylesheet" href="css/public.css" >
 <link rel="stylesheet" href="css/css.css" >
 </head>
 <body>
 <!-- Music Player -->
 <div class="music">
 <!-- Song Information-->
 <div class="word">
 <div class="clears"></div>
 <!-- Song cover -->
 <div class="img">
 <img src="images/1.jpg" id="img" alt="" /></div>
 <!-- song cover end -->
 </div>
 <!-- song information end -->
 <!-- Information and volume -->
 <div class="mtv">
 <!-- Text information -->
 <div class="text">
 <h1 id="sName">Song Name</h1>
 <h2 id="singer">Singer</h2>
 </div>
 <!-- Text message end -->
 <!-- Volume Control -->
 <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/volume.png" alt="" />
 </div>
 </div>
 </div>
 <!-- Volume control end -->
 </div>
 <!-- Information and volume end -->
 <!-- Progress Bar -->
 <div class="progress">
 <span class="cTime time" id="cTime">00:00</span> <!-- Current time -->
 <span class="tTime time" id="tTime">00:00</span> <!-- Total time -->
 <div class="clears"></div>
 <!-- Small progress bar -->
 <div class="proBar" id="songPro">
 <div class="proColor" id="proBar"></div>
 </div>
 <!-- Progress bar end -->
 </div>
 <!-- progress bar end -->
 <!-- Control buttons -->
 <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>
 <!-- Control button end -->
 <audio src="#" id="music"></audio>
 </div>
 <!-- Music player end -->
 <script src="js/js.js"></script>
 </body>
</html>

The second step is to use CSS to give it the style you like after setting up the framework. Note that I have divided the styles into public styles and independent styles and written them separately to improve code reusability. Of course, you can also use SASS for greater convenience. Here I only provide independent styles, and public styles can be found online.

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;
}

The third step is to give the music player a soul, using JS to add functions.

1. Get the ID (of course, you can also get the class name or element here, depending on your own habits).

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. Add music playback function.

Importing Music

let songs = [{
 mp3: "music/01.mp3",
 singer: "Zhao Wei",
 name: "I can't break up with you",
 img: "images/1.jpg"
 }, {
 mp3: "music/04.mp3",
 singer: "陈粒",
 name: "Flammable and explosive",
 img: "images/2.jpg"
 }, {
 mp3: "music/06.mp3",
 singer: "Hu Xia/Yu Kewei",
 name: "Do you know?",
 img: "images/3.jpg"
 }];

Music playback

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);

Pause music playback

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

Music Switch

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

 nextBtn.addEventListener("click", function(event) { //Next song index++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 });
 
 music.addEventListener('ended',function () { //Automatically play the next songindex++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 })

3. Add a progress bar.

music.addEventListener("loadedmetadata", function(event) { //Prompt that the audio metadata has been loaded tTime.innerHTML = parseInt(music.duration / 60) + ":" + parseInt(music.duration % 60);
 });
 
 music.addEventListener("timeupdate", function(event) { //Listen for music playback events 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);
 }
 }
 });

Small function: Click the progress bar and the music will change and jump to the specified time.

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. Add volume adjustment module.

let getBfb = function(event) {
 let x = event.clientX; //Returns the horizontal coordinate of the mouse pointer relative to the browser page (or client area) when the event was triggered.
 let volX = vol.getBoundingClientRect().x; //getBoundingClientRect() gets the width and height of the element let disX = x - volX;
 disX = Math.max(0, disX); //Return the maximum number disX = Math.min(120, disX); //Return the minimum number 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);

 });

All JS code

Here I use the {} scope, so that the variables declared by let or const are only valid within the code block {} where the let or const command is located, and cannot be accessed outside {} (newly added in ECMAScript 6 (ES6 for short)).

{
 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: "Zhao Wei",
 name: "I can't break up with you",
 img: "images/1.jpg"
 }, {
 mp3: "music/04.mp3",
 singer: "陈粒",
 name: "Flammable and explosive",
 img: "images/2.jpg"
 }, {
 mp3: "music/06.mp3",
 singer: "Hu Xia/Tan Weiwei",
 name: "Do you know?",
 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/pause.png" alt=""/>';
 } else {
 music.pause();
 event.currentTarget.innerHTML = '<img src="images/play.png" alt=""/>';
 }
 });

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

 nextBtn.addEventListener("click", function(event) { //Next song index++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 });
 
 music.addEventListener('ended',function () { //Automatically play the next songindex++;
 if (index > songs.length - 1) {
 index = 0;
 }
 changeMusic(index);
 })

 music.addEventListener("loadedmetadata", function(event) { //Prompt that the audio metadata has been loaded tTime.innerHTML = parseInt(music.duration / 60) + ":" + parseInt(music.duration % 60);
 });

 music.addEventListener("timeupdate", function(event) { //Listen to music playback events let jd = music.currentTime / music.duration; //Total duration of music.duration music.currentTime Current duration let bfb = jd * 100 + "%";
 proBar.style.width = bfb;
 if (music.currentTime < 10) {
 cTime.innerHTML = "0:0" + Math.floor(music.currentTime); //Math.floor() rounds down} else if (music.currentTime < 60) {
 cTime.innerHTML = "0:" + Math.floor(music.currentTime);
 } else {
 let minet = parseInt(music.currentTime / 60); //parseInt() parses a string and returns an integer 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; //Returns the horizontal coordinate of the mouse pointer relative to the browser page (or client area) when the event was triggered.
 let volX = vol.getBoundingClientRect().x; //getBoundingClientRect() gets the width and height of the element let disX = x - volX;
 disX = Math.max(0, disX); //Return the maximum number disX = Math.min(120, disX); //Return the minimum number 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);

 });
}

Final effect display:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Vue.js implements music player
  • js+audio to realize music player
  • js to implement a simple music player
  • JavaScript to implement a simple music player
  • Native JS to implement a small music player
  • JS+html5 to create a simple music player
  • Use js to teach you how to easily create an HTML music player
  • JS simulates the shrinking, folding and closing effect code of Kugou music player
  • js implements a music player compatible with IE, FF, Chrome, Opera and Safari
  • js to realize web music player

<<:  Detailed steps for installing and configuring MySQL 5.7

>>:  Virtual machine clone Linux centos6.5 system network card configuration graphic tutorial

Recommend

Detailed explanation of the functions of -I (uppercase i), -L (uppercase l), and -l (lowercase l) when compiling programs with g++ under Linux

As an entry-level Linux user, I have used simple ...

Complete steps for using Nginx+Tomcat for load balancing under Windows

Preface Today, Prince will talk to you about the ...

Detailed explanation of explain type in MySQL

Introduction: In many cases, many people think th...

Implementation of Docker container state conversion

A docker container state transition diagram Secon...

How to get the real path of the current script in Linux

1. Get the real path of the current script: #!/bi...

How to encapsulate WangEditor rich text component in Angular

The rich text component is a very commonly used c...

Detailed explanation of Mysql function call optimization

Table of contents Function call optimization Func...

Install mysql5.7 on Ubuntu 18.04

Ubuntu 18.04 installs mysql 5.7 for your referenc...

js precise calculation

var numA = 0.1; var numB = 0.2; alert( numA + num...

Vue close browser logout implementation example

Table of contents 1. beforeunload event 2. Unload...

Docker beginners' first exploration of common commands practice records

Before officially using Docker, let's first f...

How to use Nginx to proxy multiple application sites in Docker

Preface What is the role of an agent? - Multiple ...

Introduction to using data URI scheme to embed images in web pages

The data URI scheme allows us to include data in a...

Two methods to stretch the background image of a web page

There are two solutions: One is CSS, using backgro...

Detailed explanation of how to modify the style of el-select: popper-append-to-body and popper-class

How to modify the style of the el-select componen...