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