Simple Player MP3

Developer
Dang Van Thanh
Size
4,812 Kb
Views
16,192
  1. Simple Player MP3 Previews
  2. Simple Player MP3 HTML Codes
  3. Simple Player MP3 CSS Codes
  4. Simple Player MP3 JS Codes

How do I make an simple player mp3?

Simple Player with HTML5 Audio. What is a simple player mp3? How do you make a simple player mp3? This script and codes were developed by Dang Van Thanh on 13 September 2022, Tuesday.

Simple Player MP3 Previews
IQ Test

Simple Player MP3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Player MP3</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="Player" id="player"> <audio src="" class="Player__audio"> <p>Your browser doesn't support HTML5 Audio</p> </audio> <div class="Player__controlbar"> <div class="Player__control Player__control--playing"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" class="Player__control--play"> <path fill="#fff" d="M3 2l10 6-10 6z"></path> </svg> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" class="Player__control--paused"> <path fill="#fff" d="M2 2h5v12h-5zM9 2h5v12h-5z"></path> </svg> </div> <div class="Player__control Player__control--process"> <input id="seek" class="Player__control Player__control--seek" type="range" min="0" value="0"> </div> <div class="Player__control Player__control--remaining-time"></div> <div class="Player__control Player__control--volumn"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17" height="16" viewBox="0 0 17 16" class="Player__control--volumn-max"> <path fill="#fff" d="M13.907 14.407c-0.192 0-0.384-0.073-0.53-0.22-0.293-0.293-0.293-0.768 0-1.061 1.369-1.369 2.123-3.19 2.123-5.127s-0.754-3.757-2.123-5.127c-0.293-0.293-0.293-0.768 0-1.061s0.768-0.293 1.061 0c1.653 1.653 2.563 3.85 2.563 6.187s-0.91 4.534-2.563 6.187c-0.146 0.146-0.338 0.22-0.53 0.22zM11.243 12.993c-0.192 0-0.384-0.073-0.53-0.22-0.293-0.293-0.293-0.768 0-1.061 2.047-2.047 2.047-5.378 0-7.425-0.293-0.293-0.293-0.768 0-1.061s0.768-0.293 1.061 0c1.275 1.275 1.977 2.97 1.977 4.773s-0.702 3.498-1.977 4.773c-0.146 0.146-0.338 0.22-0.53 0.22v0zM8.578 11.578c-0.192 0-0.384-0.073-0.53-0.22-0.293-0.293-0.293-0.768 0-1.061 1.267-1.267 1.267-3.329 0-4.596-0.293-0.293-0.293-0.768 0-1.061s0.768-0.293 1.061 0c1.852 1.852 1.852 4.865 0 6.718-0.146 0.146-0.338 0.22-0.53 0.22z"></path> <path fill="#fff" d="M6.5 15c-0.13 0-0.258-0.051-0.354-0.146l-3.854-3.854h-1.793c-0.276 0-0.5-0.224-0.5-0.5v-5c0-0.276 0.224-0.5 0.5-0.5h1.793l3.854-3.854c0.143-0.143 0.358-0.186 0.545-0.108s0.309 0.26 0.309 0.462v13c0 0.202-0.122 0.385-0.309 0.462-0.062 0.026-0.127 0.038-0.191 0.038z"></path> </svg> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" class="Player__control--volumn-min"> <path fill="#fff" d="M15 9.674v1.326h-1.326l-1.674-1.674-1.674 1.674h-1.326v-1.326l1.674-1.674-1.674-1.674v-1.326h1.326l1.674 1.674 1.674-1.674h1.326v1.326l-1.674 1.674 1.674 1.674z"></path> <path fill="#fff" d="M6.5 15c-0.13 0-0.258-0.051-0.354-0.146l-3.854-3.854h-1.793c-0.276 0-0.5-0.224-0.5-0.5v-5c0-0.276 0.224-0.5 0.5-0.5h1.793l3.854-3.854c0.143-0.143 0.358-0.186 0.545-0.108s0.309 0.26 0.309 0.462v13c0 0.202-0.122 0.385-0.309 0.462-0.062 0.026-0.127 0.038-0.191 0.038z"></path> </svg> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Simple Player MP3 - Script Codes CSS Codes

.Player { background: #47a3da; border: 1px solid #47a3da; color: #fff; width: 40em; height: 3em; margin: 50px auto;
}
.Player__controlbar { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative;
}
.Player__control { position: relative; text-align: center; width: 3em; height: 3em; line-height: 3em; -webkit-box-flex: 0; -ms-flex: none; flex: none;
}
.Player__control svg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.Player__control--playing,
.Player__control--volumn { cursor: pointer;
}
.Player__control--playing .Player__control--paused,
.Player__control--playing.is-playing .Player__control--play,
.Player__control--volumn .Player__control--volumn-min,
.Player__control--volumn.is-muted .Player__control--volumn-max { opacity: 0;
}
.Player__control--playing .Player__control--play,
.Player__control--playing.is-playing .Player__control--paused,
.Player__control--volumn .Player__control--volumn-max,
.Player__control--volumn.is-muted .Player__control--volumn-min { opacity: 1;
}
.Player__control--process { -webkit-box-flex: 1; -ms-flex: auto; flex: auto; padding: 0 1em;
}
.Player__control--seek { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 2px; width: 100%; vertical-align: middle; display: inline-block; box-shadow: 0 1px 10px 0 rgba(255, 255, 255, .8);
}
.Player__control--seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background: #fff; width: 1em; height: 1em; border-radius: 100%; border: 1px solid transparent; box-shadow: 0 1px 10px 0 rgba(255, 255, 255, .8); z-index: 1;
}
.Player__control--remaining-time { width: 4em;
}

Simple Player MP3 - Script Codes JS Codes

'use strict';
var player = document.getElementById('player');
var playerAudio = player.querySelector('.Player__audio');
var playerPlaying = player.querySelector('.Player__control--playing');
var playerVolumn = player.querySelector('.Player__control--volumn');
var playerSeek = player.querySelector('.Player__control--seek');
var playerRemainingTime = player.querySelector('.Player__control--remaining-time');
var timeInterval;
function playerInit() { playerPlaying.addEventListener('click', playerPlayControl, false); playerVolumn.addEventListener('click', playerVolumnControl, false); playerSeek.addEventListener('change', playerChangeSeekControl, false); playerAudio.addEventListener('ended', playerEndingControl, false); playerAudio.addEventListener('loadedmetadata', playerLoadMetadata, false);
}
function playerPlayControl() { playerPlaying.classList.toggle('is-playing'); if (playerAudio.paused) { playerAudio.play(); timeInterval = setInterval(playerTimeUpdate, 100); playerSeek.addEventListener('change', playerSeekControl, false); } else { playerAudio.pause(); clearInterval(timeInterval); }
}
function playerSeekControl() { playerAudio.currentTime = playerSeek.value;
}
function playerVolumnControl() { playerVolumn.classList.toggle('is-muted'); if (playerAudio.muted) { playerAudio.muted = false; } else { playerAudio.muted = true; }
}
function playerTimeUpdate() { playerRemainingTime.innerHTML = s2m(playerAudio.duration - playerAudio.currentTime); playerSeek.max = playerAudio.duration; playerSeek.value = playerAudio.currentTime;
}
function playerLoadMetadata() { playerRemainingTime.innerHTML = s2m(playerAudio.duration);
}
function playerChangeSeekControl() { playerSeek.max = playerAudio.duration; playerAudio.currentTime = playerSeek.value;
}
function playerEndingControl() { playerAudio.pause(); playerAudio.currentTime = 0; playerPlaying.classList.remove('is-playing');
}
function s2m(seconds) { var m = Math.floor(seconds % 31536000 % 86400 % 3600 / 60); var s = seconds % 3153600 % 86400 % 3600 % 60; m = m >= 10 ? m : '0' + m; if (s >= 10) { return m + ':' + Math.round(s); } else { return m + ':0' + Math.round(s); }
}
playerInit();
Simple Player MP3 - Script Codes
Simple Player MP3 - Script Codes
Home Page Home
Developer Dang Van Thanh
Username dangvanthanh
Uploaded September 13, 2022
Rating 3
Size 4,812 Kb
Views 16,192
Do you need developer help for Simple Player MP3?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dang Van Thanh (dangvanthanh) Script Codes
Name
Media Queries Sass Mixin
Translate in CSS3 2D Transform
Modal Bootstrap with ReactJS
Pure CSS Off Canvas Icon
Skew in CSS3 Transform
CSS Triangles in Sass
Long Shadow Mixin in Sass
CSS Slide Up and Slide Down
Simple Navigation and Transition
Long Shadow CSS3 in Sass
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!