i'm trying to use wavesurfer.js but it doesn't work on Chrome. I've tried the same program in firefox and works perfectly. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="audio-container" style = "box-shadow: 0 4px 8px -4px rgba(0,0,0,0.3);">
<div class="track-name" style="position: absolute;color: white;"> Antidote</div>
<script src="https://unpkg.com/wavesurfer.js"></script>
<div class="waveform" style="background-color: #222; width: 100%; height: 130px;"></div>
<div class = "buttons">
<span class=" play-btn btn">
<i class="fas fa-play"></i>
<i class="fas fa-pause"></i>
</span>
</div>
</div>
<script>
var wavesurfer = WaveSurfer.create({
container: '.waveform',
waveColor: '#eee',
progressColor: 'red',
barWidth: 2
});
wavesurfer.load('https://cdn.shopify.com/s/files/1/0572/6499/6512/files/Rosewood_140_bpm_D_m.wav?v=1651737669');
</script>
</body>
</html>
The console gives me this warning: DevTools failed to load source map: Could not load content for https://unpkg.com/wavesurfer.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE Can someone explain to me why it's not working? Other sites using wavesurfer display perfectly even on chrome, but mine seems to not work. Thanks in advance.