I am trying to implement a audio player on my shopify store using wavesurfer.js. However, it displays a black box instead of the wave form. I have tested this with a live server, and it is supposed to look like this
But on shopify this is how it looks
This is my code. The only thing I changed was that instead of having mp3 files locally, they are on shopify.
import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js';
function createItem(name, file){
const itemDiv = document.createElement("div")
itemDiv.classList.add("item")
const rowDiv = document.createElement("div")
rowDiv.classList.add("row")
const buttonDiv = document.createElement("div")
buttonDiv.classList.add("button")
const buttonElement = document.createElement("i")
buttonElement.classList.add("fa-solid","fa-play")
const nameDiv = document.createElement("div")
nameDiv.classList.add("track-name")
if (nameDiv){
nameDiv.textContent = name
}
document.querySelector(".wave-container").appendChild(itemDiv)
itemDiv.appendChild(rowDiv)
rowDiv.appendChild(buttonDiv)
buttonDiv.appendChild(buttonElement)
const waveContainer = document.createElement("div");
waveContainer.classList.add("waveFormClass");
rowDiv.append(waveContainer);
itemDiv.appendChild(nameDiv)
const wavesurfer = WaveSurfer.create({
container: waveContainer,
waveColor: '#4F4A85',
progressColor: '#383351',
url: `${file}`,
})
wavesurfer.setOptions({height:30})
wavesurfer.on('interaction', () => {
wavesurfer.playPause();
buttonElement.classList.toggle("fa-pause");
buttonElement.classList.toggle("fa-play");
})
buttonElement.addEventListener("click", ()=> {
wavesurfer.playPause();
buttonElement.classList.toggle("fa-pause");
buttonElement.classList.toggle("fa-play");
})
}
createItem("The Villain", "The_Villain.mp3")
createItem("The Villain", "The_Villain.mp3")
createItem("The Villain", "The_Villain.mp3").wave-container {
padding: 25px;
max-width: 1000px;
height: auto;
background-color: rgba(34, 34, 34, 0.3);
border-radius: 20px;
box-sizing: border-box;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
.item{
overflow: hidden;
}
.waveFormClass{
width: 100%;
overflow: hidden;
}
.row{
display: flex;
align-items: center;
justify-content: center;
}
.button{
padding-right: 15px;
width: 10px;
height: 10px;
cursor: pointer;
}
.track-name{
display: flex;
align-items: center;
justify-content: center;
margin:10px;
}
@media (max-width: 768px) {
.wave-container {
grid-template-columns: 1fr;
}}<!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.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wave-container">
</div>
<script type="module" src="waveScript.js"></script>
</body>
</html>