How To Get audio Player To Play

[mark]

Hi, I am using the following code in an embed HTML element to create an audio player. When this code is used in code editors it works fine, however I cant figure out why the buttons arent working. I got the code from another thread where @Quentin provided it.

The only part of the player that actually works is the 3 little dots at the end to download the file. The volume and everything else doesnt function.

[Joyce]

Hi @mark

It should work out of the box, without any workflow or code added on the play button.

Looking at your screenshot, I think the problem may be that the player does not know where to find the audio file you want to play.

After src= and before ></audio>, you should see the full URL in between quotes like you see here:

It can be a bit tricky to manage because you need those double quotes. One way to do it is with the concatenate formula. In the screenshot above, you see that we have:

• the first part of the quote in between quotes,
• the URL in between quotes with a backquote (i.e. `) before and after the quotes. This is the important part that is easy to mess up,
• the last part of the quote in between quotes

Does that help?

[mark]

Thanks for the reply! Unfortunately it doesn’t seem to be working for me, here is a video of what I’m typing in

[Joyce]

Ah ok sorry, my first screenshot wasn’t clear: you don’t need to be in Javascript mode for this, you can toggle back to Formula and use the concatenate formula:

If you’re in Javascript mode, you’ll need to add return wwFormulas. before what you have to work with the concatenate formula and return its result:

[mark]

Thanks! You’re a life saver!

[Joyce]

My pleasure

[mark]

One more question if possible. I’m trying to style the audio player with CSS. I’ve set the elements HTML Attribute to “audio-player” and put the css in the custom code for the page referencing the element id, and I also tried using the css right inside the elements custom css box and I cant seem to see any changes at all, even when I publish it.

Whats the best way to add the custom css to this audio component?

[luka]

You can either use a html selector for all audio elements like audio or you can add a class to your audio player and it would look something like

<audio class="audio-player" controls src="/media/cc0-audio/t-rex-roar.mp3"></audio>

See this link for styling the default audio player

for example changing the bg color would look like this in css

audio::-webkit-media-controls-panel {
  background-color: #56AEFF;
}

[Hekup]

Hi,

I would like to take the opportunity of this post to ask you a question :

Is there a way to style the audio player outside of “custom code” ?
Because I’d like to integrate the audio player in a tricky way. And it’s very inconvenient to publish my page to see the result (as the code in “custom code” only appears in published project). It’s also very inconvenient to design the rest of my page if the audio player isn’t correctly integrate.

Thanks

[mark]

What I ended up doing was basically rebuilding the Apple player in my app, with my own pause and play buttons etc. I use the Video Player component to actually play the audio file, only I don’t actually display the component, because of course there isnt a video to show.

This way in a workflow you can use actions on ‘Execute Component Action’ for the audio player to handle the pausing and playing of the file.

[Joyce]

Nicely done @mark! Perhaps it’s a component you can add to the Marketplace when it’s out

@Hekup, great feedback! I’ve shared it with the product team. I don’t think it’s anything we’ll be able to prioritize any time soon but Mark’s solution is great to build any custom player you like.

If you need any help along the way, feel free to start a new thread with the specific design you’d like to reproduce. I’m sure we can help

[Alexander_L]

@mark

t to actu

Hi. I love your idea as I need to remove the 3 dots (can’t have a download button on my content) and I also need to implement the play and pause outside of the audio player.

I’ve managed to get it working, with the exception of a progress slider and duration (time played so far). Did you get this working and if so, what variables did you hook into @mark ?

Or perhaps @Joyce do you know if the Video player exposes variables I can use to custom build my own progress bar and duration stamps?

Thanks,
Alexander

[mark]

Hey, this should hopefully answer a few of your questions. Let me know if I didnt and I’ll try to get you a better video lol.

Js for Progress Bar:
// Access the current time of the meditation player

const currentTime = variables[‘6b71d3ed-1632-46a1-b0dc-df7937ff4e4d-Current time’];

// Access the total duration of the audio

const totalDuration = variables[‘22a8e677-824b-4d4e-b14a-75a912978246’]?.[‘audio’]?.[‘meta’]?.[‘duration’];

// Calculate the percentage of the duration that has been played

const percentagePlayed = (currentTime / totalDuration) * 100;

// Return the percentage played

return percentagePlayed;

Js for time display:
// Get the current time in seconds

let currentTimeInSeconds = variables[‘6b71d3ed-1632-46a1-b0dc-df7937ff4e4d-Current time’];

// Remove the fractional part of the current time

currentTimeInSeconds = Math.trunc(currentTimeInSeconds);

// Calculate the minutes and seconds

let minutes = Math.floor(currentTimeInSeconds / 60);

let seconds = currentTimeInSeconds % 60;

// Format the seconds to always have 2 digits

let formattedSeconds = seconds < 10 ? ‘0’ + seconds : seconds;

// Return the time in the format ‘minutes:seconds’

return minutes + ‘:’ + formattedSeconds;

[Joyce]

@Alexander_L

Or perhaps @Joyce do you know if the Video player exposes variables I can use to custom build my own progress bar and duration stamps?

Yes, it does!

I’ll wrote some docs about that element to make it easier to use and customize but in the meantime, you’ll find info on how to work with its component actions here.

I don’t know about the duration side of things but the play / stop buttons are definitely doable.

[Alexander_L]

Hey @mark - thanks a million for sharing the video and code!! That was super kind and generous of you.

And it was really helpful to see what you did for your player! I had to build out the player for the web version of our kids audio stories app because the built in weweb components (audio or video) do not look good on iOS devices.

I do like that they have a ‘widget’ that works when you leave the app, and that the component makes connecting to bluetooth devices super easy.

Here’s a quick video I shot of the component, including seek functionality:

Again - thank you!

[Joyce]

Very cool! Looks amazing, Alexander

[Mael]

Hello,

We released a Sound plugin this week

With this plugin you will have access to all these new actions in the workflow

A doc will come shortly