I'm making audio player with wavesurfer.js. I have passed the song source in the button's src attribute. When ever I refresh the page the idm starts downloading the song and file is not loaded with wavesurfer object. I tried to give the link using jQuery variable but it still downloading the song and wavesurfer can't load that song. How can solve this problem?
Here is my jQuery code to load the song and html code:
<!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/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
</head>
<body>
<div class="container mt-5">
<div class="row border mt-5">
<div id="pageDiv"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/wavesurfer.js@5.2.0/dist/wavesurfer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
const wavesurfer1 = WaveSurfer.create({
container: "#pageDiv"
});
wavesurfer1.load("songs/song1.mp3");
wavesurfer1.on('load', function(){
wavesurfer1.play();
});
</script>
</body>
</html>