This is a demonstration using a photo as a link to start an audio track that also shows information about that audio track. The information panel is given a class name, rather than using a popup. This is because, when using audio tag in a Xara popup, closing the popup does not pause (stop) the audio track. In this example ‘controls’ has been omitted to hide the audio tag replaced with ‘In-Play’ buttons on the information panel to pause, continue and stop the audio track. The approach here uses Xara standard layers with a unique class name “Soundn” given to all elements on each layer; the outcome is the same as using popups but provides the designer with greater freedom to manage the audio. The alternative would be to use a layer’s internal reference, but this can change when layers are deleted or added. The Audio tag is given an id of ‘audiplay’: <audio id="audiplay" src="https://initiostar.co.uk/demo/Joystock_-_Epic.mp3" controls controlsList="nodownload" style="width: 300px;"></audio> In this example the audio tracks are prevented from being downloaded. The photo is given a link: javascript: loadAudio();playAudio();showSounds('Sound1'); Other photo links would have the link as “Soundn” where each class name is “Sound2”, “Sound3” and so on. This code is added to the Website HTML (body) - these are the custom design audio controls <script> var x = document.getElementById("audiplay"); function playAudio() { x.play(); } function pauseAudio() { x.pause();} function loadAudio() { x.load();} // this script controls the visibility of the ‘Class’ layers function hideSounds(speed) {$('[class*="Sound"]').hide(speed);} function showSounds(ref) {$('.' + ref).slideDown('slow');} hideSounds(); </script>