I am trying to build a music player. now I am getting link of each song, generating its wave, and then printing the wave back to that song. wave is printing in <div class="wavetest"></div>. here is the HTML code
<div class="playlist p-5">
<div class="song p-3">
<div class="container">
<div class="row">
<div class="col-sm-2">
<span><button href="song.mp3" class="songlink btn"> song 1<i class="fa fa-play playbtn"></i></button></span>
</div>
<div class="col-sm-8">
<div class="wavetest">here wave should be of song 1</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<span><button href="song2.m4a" class="songlink btn"> song 2<i class="fa fa-play playbtn"></i></button></span>
</div>
<div class="col-sm-8">
<div class="wavetest">here wave should be of song 2</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<span><button href="song3.mp3" class="songlink btn"> song 3<i class="fa fa-play playbtn"></i></button></span>
</div>
<div class="col-sm-8">
<div class="wavetest">here wave should be of song 3</div>
</div>
</div>
</div>
</div>
</div>
here is the jquery code
$(document).ready(function(){
var links_arr = [];
$('.playlist button').each(function () {
links_arr.push( $(this).attr("href") );
});
for (i = 0; i < links_arr.length; ++i) {
var link = links_arr[i];
var wavesurfer = WaveSurfer.create({
container: '.wavetest', //container where wave will be printed
waveColor: 'violet',
progressColor: 'purple'
});
wavesurfer.load(link); //generating wave for given song
}
});
now I am getting the wave of all three songs in first <div class="wavetest"></div>. I want to get the wave in its appropriate div. how can I tackle it and suggest if there is any better of doing this.
Container can be a DOM element, so you can pass each wavetest to each WaveSurfer.create. Let me know if this works.
$(document).ready(function(){
var links_arr = [];
$('.playlist .row').each(function () {
const link = $(this).find('button').attr("href");
const waveContainer = $(this).find('.wavetest');
var wavesurfer = WaveSurfer.create({
// https://wavesurfer-js.org/docs/ says container can be a DOM element
// waveContainer is a jQuery object, waveContainer[0] to get actually DOM element
container: waveContainer[0],
waveColor: 'violet',
progressColor: 'purple'
});
wavesurfer.load(link); //generating wave for given song
});
});