I require help with wavesurfer.js. It functions correctly on my localhost, but after uploading it to Hostinger, the wavesurfer is not being generated. Any guidance would be appreciated.
I have uploaded it to https://subdomain.example.com
const playBtn = document.getElementById('playBtn');
const wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: '#ddd',
progressColor: '#ff006c',
barWidth: 4,
responsive: true,
height: 90,
barRadius: 4,
});
wavesurfer.load('./assets/media/koolFM.wav');
playBtn.onclick = function(){
wavesurfer.playPause();
if(playBtn.src.includes("play.png")){
playBtn.src = "./assets/media/pause.png";
} else {
playBtn.src = "./assets/media/play.png";
}
}
wavesurfer.on('finish', function(){
playBtn.src = "./assets/media/play.png";
wavesurfer.stop();
})
<div class="hero-audio">
<div class="music">
<h1 class="text-center">H1 tag here</h1>
<p class="text-center">Paragraph here</p>
<div class="track">
<img src="./assets/media/play.png" id="playBtn" alt="">
<div id="waveform"></div>
</div>
</div>
</div>Please refer to the images below:
