I’m trying to make a custom music player using Wavesurfer.JS. I have made a playlist with the play button in front of each song wave. The songs load at load time. Now, I want that when I click on the play button the song in front of that button should be played on the same div where it is already loaded as I have shown in the screenshot as I want to play the song
when i try to play it plays something like this: when i played the song
the HTML is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Player</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<link rel="stylesheet" type="text/css" href="css/render5.css">
</head>
<body>
<section class="player py-5">
<div class="container mb-5">
<div class="row">
<h3 class="text-center text-danger"><i class="fa fa-music"></i> Custom Music Player</h3>
</div>
</div>
<div class="player-playlist">
<div class="container">
<div class="row border-bottom g-3 player-song-detail">
<div class="col-md-1 col-2 my-auto text-center">
<!-- play button -->
<button href="songs/song1.mp3" class="songlink songBtn btn"><i class="fa fa-play fa-lg playbtn"></i></button>
<input type="text" value="Song Title" placeholder="write song title here" hidden>
</div>
<div class="col-md-4 col-8 my-auto">
<!-- song waves -->
<div class="wavetest w-100"></div>
</div>
<div class="col-md-1 col-1 my-auto">
<span id="songdur"></span>
</div>
<div class="col-md-3 song-desc">
<p class="song-date">May 2020</p>
<p class="m-0"> <span class="fw-bold">Gas carrier</span> - Maadi, man banging on gas tank and calling out, recorded from balcony</p>
</div>
</div>
<div class="row border-bottom g-3 player-song-detail">
<div class="col-md-1 col-2 my-auto text-center">
<button href="songs/song2.m4a" class="songlink songBtn btn"><i class="fa fa-play fa-lg playbtn"></i></button>
</div>
<div class="col-md-4 col-8 my-auto">
<div class="wavetest w-100"></div>
</div>
<div class="col-sm-1 col-1 my-auto">
<span id="songdur"></span>
</div>
<div class="col-md-3 song-desc">
<p class="song-date">May 2020</p>
<p class="m-0"> <span class="fw-bold" id="songName">Gas carrier</span> - Maadi, man banging on gas tank and calling out, recorded from balcony</p>
</div>
</div>
<div class="row border-bottom g-3 player-song-detail">
<div class="col-md-1 col-2 my-auto text-center">
<button href="songs/song3.mp3" class="songlink songBtn btn"><i class="fa fa-play fa-lg playbtn"></i></button>
</div>
<div class="col-md-4 col-8 my-auto">
<div class="wavetest w-100"></div>
</div>
<div class="col-sm-1 col-1 my-auto">
<span id="songdur"></span>
</div>
<div class="col-md-3 song-desc">
<p class="song-date">May 2020</p>
<p class="m-0"> <span class="fw-bold" id="songName">Gas carrier</span> - Maadi, man banging on gas tank and calling out, recorded from balcony</p>
</div>
</div>
</div>
</div>
</section>
<section class="bottom-player w-100">
<div class="container">
<div class="row">
<div class="col-md-5 border-end border-secondary my-auto">
<div class="play-menu">
<button class="me-2 btn play-all" id="playAll"> Play All</button>
<button class="me-2 btn paly-icon" id="preSong"> <i class="fa fa-step-backward"></i></button>
<button class="me-2 btn paly-icon" id="pausePlay"><i class="fa fa-play"></i></button>
<button class="me-2 btn paly-icon" id="nextSong"> <i class="fa fa-step-forward"></i></button>
<button class="me-2 btn" id="volicon"><i class="fa fa-volume"></i></button>
<input id="volume" type="range" min="0" max="1" value="1" step="0.1" class="me-2">
<span class="me-2" id="current">0:00</span> /
<span id="duration">0:00</span>
</div>
</div>
<div class="col-md-7 my-auto">
<span>Playing: <span id="songTitle"></span></span>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/wavesurfer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>
JS code is as follows:
//loading all songs in top list
$(document).ready(function(){
$('.player-playlist .player-song-detail').each(function () {
const link = $(this).find('.songlink').attr("href");
const waveContainer = $(this).find('.wavetest');
const dur = $(this).find('#songdur');
var wavesurfer = WaveSurfer.create({
container: waveContainer[0],
waveColor: '#CCCCCC',
progressColor: '#E64C51',
height:40,
barWidth:2,
barGap:2
});
wavesurfer.load(link); //generating wave for given song
wavesurfer.on('ready', function () {
var timeCalculator = function (value) { //changing the song duration in seconds and minutes
second = Math.floor(value % 60);
minute = Math.floor((value / 60) % 60);
if (second < 10) {
second = "0" + second;
}
return minute + ":" + second;
};
$(dur[0]).text(timeCalculator(wavesurfer.getDuration())); //printing the
});
});
}); //end loading
$(".player-playlist .songlink").click(function(){
$('#songTitle').text($(this).next().val());
var songLink = $(this).attr('href');
var wavesurfer = WaveSurfer.create({
container: '.wavetest',
waveColor: '#CCCCCC',
progressColor: '#E64C51',
barWidth:2,
height:40,
barGap:2,
backgroundColor: 'transparent'
});
if (wavesurfer.isPlaying()) { //checking if already any song is playing
wavesurfer.stop();
}
wavesurfer.load(songLink);
wavesurfer.on('ready', function () {
wavesurfer.play();
//end volume
});
//stops on finishing the song
wavesurfer.on('finish', function () {
wavesurfer.stop();
});
}); //end top play button click