HTML Audio Player with Dynamic URL from Data Collection

Ask the community
,
1

Is there a way to create an HTML Component audio player on a dynamic page that plays an audio file from a URL grabbed from the page’s linked data collection?

I know that dynamic pages don’t currently support audio, but I’m trying to make a work-around.

Using suggestions from this thread…

…I’ve made the following code to 1) get the URL for the audio file from the current item in the data collection, and 2) send it to an HTML component that plays the audio on page load:

PAGE CODE

$w.onReady(function () {
    $w("#html1").postMessage($w("#dynamicDataset").getCurrentItem().audioSample);
});

HTML COMPONENT

<script type="text/javascript">
  window.onmessage = (event) => {
    if (event.data) {
       let receivedData = event.data;

var audio = new Audio(receivedData);
       audio.play();
    }
  };
</script>

Is there a way to implement this using a simple HTML audio player with controls (play/pause, etc)?

Ideally I’d customize style characteristics too (control color, background color, etc) but even using the native browser audio controls would be better than autoplay.

2

Hey, did you try doing that with an html5 audio tag?

3

Thanks, Itai. That would get the player in there, but what I’m after is how to have the HTML Component connect the audio URL it’s retrieved from the Page Code (via Javascript) with the HTML markup for the player.

That way, the player will draw the URL dynamically from my data collection, letting me use a single dynamic page.

I’m also still not quite sure how to change the style attributes of the player. Basically, I’m looking for this (with both play and pause controls)…

980×980 18.2 KB

4

Regarding styling, check out html - Is it possible to style html5 audio tag? - Stack Overflow

Regarding connection the url from Page Code, try something like this:
document.getElementById(‘player’).src = event.data

5

Right. I’ve got something like that in the JS portion of my component code above, but I need to connect the data it pulls to the audio player in the HTML portion. Not sure how to code that.

6

It is not possible to include dynamic values inside the HTML itself.
The HTML has to be static, for example:

<audio id="audio" controls="controls">
  <source id="audioSource" src=""></source>
  Your browser does not support the audio format.
</audio>

With no src defined at all.

And then later, when the component receives the required data, it can set the src dynamically, like that:

<script type="text/javascript">
  window.onmessage = (event) => {
    if (event.data) {
       let receivedData = event.data;

	document.getElementById(‘audioSource’).src = receivedData
    }
  };
</script>
7

Thanks. Tried that but didn’t work. Not sure what the issue is. Maybe Wix is using something else for the audio player ID? Or maybe it won’t work in Preview and I have to publish?

(Thanks for your patience with a beginner.)

8

Can you share a link to the relevant page?

9

I’m doing a new version of my site from scratch, so it’ll take a while to build access to the dynamic page. I just tried a simple link from the home page, but that doesn’t seem to work (the link is “MUSIC” up at the top)…

I was mostly just trying to play around with Wix Code to see if I could make a dynamic audio player.

Not sure if this is gonna work, though.

10

Oops. Forgot to take the data collection live. Should work now…

https://aaronhelgeson.wixsite.com/mysite/Music/Calls-of-close-and-away

11

Hey,

Please try giving an id to the source element, in addition to the audio element.
And then try with code to set the src property of the source element.
I believe it will work.

If it doesn’t please send the link again with the code and i’ll check.

Thanks,
Itai

12

Did you get this to work Aaron? If so, can you share your code? I’m trying to do the same with a JS video player pulling video url’s from my collection

13

Aaron, did you manage to get this to work? I’m trying to do exactly the same thing, but get stuck as per your post on 1st Aug 2018! Any help would be greatly appreciated!