<div id=”music-player”> <audio id=”audio-element” controls> <source src=”” id=”audio-source”> Your browser does not support the audio element. </audio> <div id=”track-info”> <p id=”track-title”></p> <p id=”track-price”></p> </div> <div id=”custom-buttons”> <a href=”” id=”button1″></a> <a href=”” id=”button2″></a> <a href=”” id=”button3″></a> <a href=”” id=”button4″></a> </div> </div>

<div id=”music-player”> <audio id=”audio-element” controls> <source src=”” id=”audio-source”> Your browser does not support the audio element. </audio> <div id=”track-info”> <p id=”track-title”></p> <p id=”track-price”></p> </div> <div id=”custom-buttons”> <a href=”” id=”button1″></a> <a href=”” id=”button2″></a> <a href=”” id=”button3″></a> <a href=”” id=”button4″></a> </div> </div>

var audioElement = document.getElementById(“audio-element”);
var audioSource = document.getElementById(“audio-source”);
var trackTitle = document.getElementById(“track-title”);
var trackPrice = document.getElementById(“track-price”);
var button1 = document.getElementById(“button1”);
var button2 = document.getElementById(“button2”);
var button3 = document.getElementById(“button3”);
var button4 = document.getElementById(“button4”);

// Function to update the audio source and track info
function updateTrack(audioUrl, title, price, button1Url, button2Url, button3Url, button4Url) {
audioSource.src = audioUrl;
trackTitle.innerHTML = title;
trackPrice.innerHTML = “Price: $” + price;
button1.href = button1Url;
button2.href = button2Url;
button3.href = button3Url;
button4.href = button4Url;
audioElement.load();
audioElement.play();
}