How are you today! Hopefully, everything is fine and healthy, always safe, amen.
Okay without much ado, this time we will share one tutorial that is pretty good for your learning all. This is related to music.
Maybe all of you are familiar when you hear the word music. A little story, in general music, is a sound that is composed in such a way that contains rhythm, song, tune, and harmony, especially from the sound produced from the tools that can produce rhythm. Although music is a kind of intuition phenomenon, to create, improve, and present it is an art form. Listening to music is a kind of entertainment. Music is a very unique phenomenon that can be produced by several musical instruments.
Do you already know how the creation of music, history, and pre-history is like?
If you don't know, you can read it in detail about the history of this music.
Back to the topic of discussion, In the tutorial that we will discuss is making a music audio player. What is an audio player? An audio player can be said of a tool whose function is to play music. This is quite enough, yes you could say easy but also quite complicated for beginners who do not understand about coding.
For the ways and stages of manufacture, you can see below:
How To Make Music Audio Player With Html, Css, And Javascript
Here of course we need the ingredients as contained in the title of this article, namely:
- HTML
- CSS
- JAVASCRIPT
For the first step we will try to make the Css. And as an example, consider the following:
body{
background-color: #2d2d2d;
color: #ffc266;
font-family: 'Roboto', sans-serif;
}
#myProgress {
width: 420px;
background-color: #d9d9f2;
cursor: pointer;
border-radius: 10px;
}
#myBar {
width: 0%;
height: 5px;
background-color: #ffc266;
border-radius: 10px;
}
.logo {
fill: red;
}
.btn-action{
cursor: pointer;
padding-top: 10px;
width: 30px;
}
.btn-ctn, .infos-ctn{
display: flex;
align-items: center;
justify-content: center;
}
.infos-ctn{
padding-top: 20px;
}
.btn-ctn > div {
padding: 5px;
margin-top: 18px;
margin-bottom: 18px;
}
.infos-ctn > div {
margin-bottom: 8px;
color: #ffc266;
}
.first-btn{
margin-left: 3px;
}
.duration{
margin-left: 10px;
}
.title{
margin-left: 10px;
width: 210px;
text-align: center;
}
.player-ctn{
border-radius: 15px;
width: 420px;
padding: 10px;
background-color: #09f;
margin:auto;
margin-top: 100px;
}
.playlist-track-ctn{
display: flex;
background-color: #464646;
margin-top: 3px;
border-radius: 5px;
cursor: pointer;
}
.playlist-track-ctn:last-child{
/*border: 1px solid #ffc266; */
}
.playlist-track-ctn > div{
margin:10px;
}
.playlist-info-track{
width: 80%;
}
.playlist-info-track,.playlist-duration{
padding-top: 7px;
padding-bottom: 7px;
color: #e9cc95;
font-size: 14px;
pointer-events: none;
}
.playlist-ctn{
padding-bottom: 20px;
}
.active-track{
background: #4d4d4d;
color: #ffc266 !important;
font-weight: bold;
}
.active-track > .playlist-info-track,.active-track >.playlist-duration,.active-track > .playlist-btn-play{
color: #ffc266 !important;
}
.playlist-btn-play{
pointer-events: none;
padding-top: 5px;
padding-bottom: 5px;
}
.fas{
color: #ffc266;
font-size: 20px;
}
Save all the Css code above into style.css. If so, continue to the next step, Javascript. You can see an example of javascript below:
function createTrackItem(index,name,duration){
var trackItem = document.createElement('div');
trackItem.setAttribute("class", "playlist-track-ctn");
trackItem.setAttribute("id", "ptc-"+index);
trackItem.setAttribute("data-index", index);
document.querySelector(".playlist-ctn").appendChild(trackItem);
var playBtnItem = document.createElement('div');
playBtnItem.setAttribute("class", "playlist-btn-play");
playBtnItem.setAttribute("id", "pbp-"+index);
document.querySelector("#ptc-"+index).appendChild(playBtnItem);
var btnImg = document.createElement('i');
btnImg.setAttribute("class", "fas fa-play");
btnImg.setAttribute("height", "40");
btnImg.setAttribute("width", "40");
btnImg.setAttribute("id", "p-img-"+index);
document.querySelector("#pbp-"+index).appendChild(btnImg);
var trackInfoItem = document.createElement('div');
trackInfoItem.setAttribute("class", "playlist-info-track");
trackInfoItem.innerHTML = name
document.querySelector("#ptc-"+index).appendChild(trackInfoItem);
var trackDurationItem = document.createElement('div');
trackDurationItem.setAttribute("class", "playlist-duration");
trackDurationItem.innerHTML = duration
document.querySelector("#ptc-"+index).appendChild(trackDurationItem);
}
var listAudio = [
{
name:"Artist 1 - audio 1",
file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3",
duration:"02:12"
},
{
name:"Artist 2 - audio 2",
file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_2MG.mp3",
duration:"00:52"
},
{
name:"Artist 3 - audio 3",
file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_1MG.mp3",
duration:"00:27"
}
]
for (var i = 0; i < listAudio.length; i++) {
createTrackItem(i,listAudio[i].name,listAudio[i].duration);
}
var indexAudio = 0;
function loadNewTrack(index){
var player = document.querySelector('#source-audio')
player.src = listAudio[index].file
document.querySelector('.title').innerHTML = listAudio[index].name
this.currentAudio = document.getElementById("myAudio");
this.currentAudio.load()
this.toggleAudio()
this.updateStylePlaylist(this.indexAudio,index)
this.indexAudio = index;
}
var playListItems = document.querySelectorAll(".playlist-track-ctn");
for (let i = 0; i < playListItems.length; i++){
playListItems[i].addEventListener("click", getClickedElement.bind(this));
}
function getClickedElement(event) {
for (let i = 0; i < playListItems.length; i++){
if(playListItems[i] == event.target){
var clickedIndex = event.target.getAttribute("data-index")
if (clickedIndex == this.indexAudio ) { // alert('Same audio');
this.toggleAudio()
}else{
loadNewTrack(clickedIndex);
}
}
}
}
document.querySelector('#source-audio').src = listAudio[indexAudio].file
document.querySelector('.title').innerHTML = listAudio[indexAudio].name
var currentAudio = document.getElementById("myAudio");
currentAudio.load()
currentAudio.onloadedmetadata = function() {
document.getElementsByClassName('duration')[0].innerHTML = this.getMinutes(this.currentAudio.duration)
}.bind(this);
var interval1;
function toggleAudio() {
if (this.currentAudio.paused) {
document.querySelector('#icon-play').style.display = 'none';
document.querySelector('#icon-pause').style.display = 'block';
document.querySelector('#ptc-'+this.indexAudio).classList.add("active-track");
this.playToPause(this.indexAudio)
this.currentAudio.play();
}else{
document.querySelector('#icon-play').style.display = 'block';
document.querySelector('#icon-pause').style.display = 'none';
this.pauseToPlay(this.indexAudio)
this.currentAudio.pause();
}
}
function pauseAudio() {
this.currentAudio.pause();
clearInterval(interval1);
}
var timer = document.getElementsByClassName('timer')[0]
var barProgress = document.getElementById("myBar");
var width = 0;
function onTimeUpdate() {
var t = this.currentAudio.currentTime
timer.innerHTML = this.getMinutes(t);
this.setBarProgress();
if (this.currentAudio.ended) {
document.querySelector('#icon-play').style.display = 'block';
document.querySelector('#icon-pause').style.display = 'none';
this.pauseToPlay(this.indexAudio)
if (this.indexAudio < listAudio.length-1) {
var index = parseInt(this.indexAudio)+1
this.loadNewTrack(index)
}
}
}
function setBarProgress(){
var progress = (this.currentAudio.currentTime/this.currentAudio.duration)*100;
document.getElementById("myBar").style.width = progress + "%";
}
function getMinutes(t){
var min = parseInt(parseInt(t)/60);
var sec = parseInt(t%60);
if (sec < 10) {
sec = "0"+sec
}
if (min < 10) {
min = "0"+min
}
return min+":"+sec
}
var progressbar = document.querySelector('#myProgress')
progressbar.addEventListener("click", seek.bind(this));
function seek(event) {
var percent = event.offsetX / progressbar.offsetWidth;
this.currentAudio.currentTime = percent * this.currentAudio.duration;
barProgress.style.width = percent*100 + "%";
}
function forward(){
this.currentAudio.currentTime = this.currentAudio.currentTime + 5
this.setBarProgress();
}
function rewind(){
this.currentAudio.currentTime = this.currentAudio.currentTime - 5
this.setBarProgress();
}
function next(){
if (this.indexAudio 0) {
var oldIndex = this.indexAudio
this.indexAudio--;
updateStylePlaylist(oldIndex,this.indexAudio)
this.loadNewTrack(this.indexAudio);
}
}
function updateStylePlaylist(oldIndex,newIndex){
document.querySelector('#ptc-'+oldIndex).classList.remove("active-track");
this.pauseToPlay(oldIndex);
document.querySelector('#ptc-'+newIndex).classList.add("active-track");
this.playToPause(newIndex)
}
function playToPause(index){
var ele = document.querySelector('#p-img-'+index)
ele.classList.remove("fa-play");
ele.classList.add("fa-pause");
}
function pauseToPlay(index){
var ele = document.querySelector('#p-img-'+index)
ele.classList.remove("fa-pause");
ele.classList.add("fa-play");
}
function toggleMute(){
var btnMute = document.querySelector('#toggleMute');
var volUp = document.querySelector('#icon-vol-up');
var volMute = document.querySelector('#icon-vol-mute');
if (this.currentAudio.muted == false) {
this.currentAudio.muted = true
volUp.style.display = "none"
volMute.style.display = "block"
}else{
this.currentAudio.muted = false
volMute.style.display = "none"
volUp.style.display = "block"
}
}
Save it into the app.js file or you can name it as you wish.
The next step is creating HTML. The overall example would be like this:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a062562745.js" crossorigin="anonymous"></script>
<title>Musik Audio Player</title>
<link rel=stylesheet href="style.css" media=all>
</head>
<body>
<audio id="myAudio" ontimeupdate="onTimeUpdate()">
<!-- <source src="audio.ogg" type="audio/ogg"> -->
<source id="source-audio" src="" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="player-ctn">
<div class="infos-ctn">
<div class="timer">00:00</div>
<div class="title"></div>
<div class="duration">00:00</div>
</div>
<div id="myProgress">
<div id="myBar"></div>
</div>
<div class="btn-ctn">
<div class="btn-action first-btn" onclick="previous()">
<div id="btn-faws-back">
<i class='fas fa-step-backward'></i>
</div>
</div>
<div class="btn-action" onclick="rewind()">
<div id="btn-faws-rewind">
<i class='fas fa-backward'></i>
</div>
</div>
<div class="btn-action" onclick="toggleAudio()">
<div id="btn-faws-play-pause">
<i class='fas fa-play' id="icon-play"></i>
<i class='fas fa-pause' id="icon-pause" style="display: none"></i>
</div>
</div>
<div class="btn-play" onclick="forward()">
<div id="btn-faws-forward">
<i class='fas fa-forward'></i>
</div>
</div>
<div class="btn-action" onclick="next()">
<div id="btn-faws-next">
<i class='fas fa-step-forward'></i>
</div>
</div>
<div class="btn-mute" id="toggleMute" onclick="toggleMute()">
<div id="btn-faws-volume">
<i id="icon-vol-up" class='fas fa-volume-up'></i>
<i id="icon-vol-mute" class='fas fa-volume-mute' style="display: none"></i>
</div>
</div>
</div>
<div class="playlist-ctn"></div>
</div>
<script src=app.js></script>
</body>
</html>
Now at this stage, let's say we have finished making it. You just need to combine it like the example we have given above.
Note:
Please edit the CSS section, for background colors, etc.
And don't forget to check first, whether it works or not. If all the scripts above do not work, there is a possibility that you made a wrong move or there could be a code that was missed / wrong. Because this script has been tested before we publish it.
For example, you can see via the button below.
Live Demo
We think that's enough for this tutorial, Making Music Audio Player. Hopefully this is useful and thank you.
Tags:
Tutorials