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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CRYOCLOUD | Ice Cream in Malaysia</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Icons -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="./assets/css/style.css">
<!-- wavesurfer -->
<script src="https://unpkg.com/wavesurfer.js@7"></script>
</head>
<div class="hero-audio">
<div class="music">
<div class="track">
<img src="./assets/media/play.png" id="playBtn" alt="">
<div id="waveform"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
<script src="./assets/js/app.js"></script>
</body>
</html>
The app.js file:
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">Lets hear our advertisement on Koolfm</h1>
<p class="text-center">It is our way to show you the brand committment</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:
