Guys ok so I've created a sample website with 3 examples. All of them with audio urls extracted from a simple database.
Example 1 - Using an html component as a button, it plays the audios in a loop (the next audio is played everytime the button is clicked).
Example 2 - Using an html component as a button, it plays an audio everytime the button is clicked.
Example 3 - Using an html component + a wix button, it plays an audio everytime the wix button is clicked.
Here's the sample website: https://matheusmvl.wixsite.com/audioexample
See the codes with comments bellow. Hope it helps!
Html component #html1
Play Next (html1)
Html component #html2
Play (html2)
Html component #html3
HTML COMPONENT
INTERACT WITH IT BY CLICKING ANYWHERE INSIDE IT OR CHROME WON'T ALLOW THE AUDIO TO PLAY
(try clicking the button before clicking here)
Page code
$w.onReady(function () {
$w("#audioDataBase").onReady( () => {
//Get the total number of items in the database
const numberOfAudios = $w("#audioDataBase").getTotalCount();
//Get all the database items
$w("#audioDataBase").getItems(0, numberOfAudios)
.then( (result) => {
let items = result.items;
//Retrieve all the audio urls from the items array and puts them into a new array
var audioURLs = items.map(item => item["audioLink"]);
//Upon receiving the message from the html component "html1" telling it's loaded, the page sends it the audio urls array and
//shows the html component, which in this case is a button.
$w("#html1").onMessage( (event, $w) => {
$w('#html1').postMessage(audioURLs);
$w('#html1').show();
} );
//Upon receiving the message from the html component "html2" telling it's loaded, the page sends it the audio url of the first
//item of the array and then shows the html component, which in this case is also a button.
$w("#html2").onMessage( (event, $w) => {
$w('#html2').postMessage(items[0].audioLink);
$w('#html2').show();
} );
//Upon clicking the button1, it sends the html component "html3" a message with the audio url of the first item of the array.
//In this case the html component is not a button, but simple text.
$w("#button1").onClick( (event, $w) => {
$w('#html3').postMessage(items[0].audioLink);
} );
} )
.catch( (err) => {
let errMsg = err.message;
let errCode = err.code;
} );
} );
});