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

Use vue to implement handwritten signature function

Personal implementation screenshots: Install: npm...

Docker container explains in detail how to simplify the image and reduce the size

Table of contents 1. Reduce the number of image l...

Summary of Common Problems with Mysql Indexes

Q1: What indexes does the database have? What are...

Install tomcat and deploy the website under Linux (recommended)

Install jdk: Oracle official download https://www...

MySQL 8.0.17 installation and configuration graphic tutorial

This article records the graphic tutorial of MySQ...

MySQL joint table query basic operation left-join common pitfalls

Overview For small and medium-sized projects, joi...

Example code for CSS pseudo-classes to modify input selection style

Note: This table is quoted from the W3School tuto...

React handwriting tab switching problem

Parent File import React, { useState } from '...

Detailed explanation of the case of dynamically generating tables using JavaScript

Table of contents Preface Implementation ideas Im...

The difference and advantages and disadvantages of Mysql primary key UUID and auto-increment primary key

introduction I used postgresql database for some ...

HTML table markup tutorial (28): cell border color attribute BORDERCOLOR

To beautify the table, you can set different bord...

Introduction to the B-Tree Insertion Process

In the previous article https://www.jb51.net/arti...

Mysql 5.7.17 winx64 installation tutorial on win7

Software version and platform: MySQL-5.7.17-winx6...

vue.js Router nested routes

Preface: Sometimes in a route, the main part is t...

Vue-Router installation process and principle detailed

Table of contents 1. Front-end routing implementa...