# How To Get audio Player To Play

**URL:** <https://community.weweb.io/t/how-to-get-audio-player-to-play/3928>\
**Category:** Ask us anything\
**Created:** [August 17, 2023, 4:00pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928 "2023-08-17T16:00:08Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![mark](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark/32/4163_2.png) [@mark](https://community.weweb.io/u/mark)\
**Post date:** [August 17, 2023, 4:00pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/1 "2023-08-17T16:00:08Z")

</div>

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.

 ![Screenshot 2023-08-17 at 9.52.29 AM](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/0fe913f368f2975827e0fbbe56b57fe1cc91a6fd.png)

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [August 17, 2023, 10:27pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/2 "2023-08-17T22:27:40Z")

</div>

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:

 ![CleanShot 2023-08-18 at 00.23.28@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/9f69281ad0936a76c969bf3065d08b523944162a.png)

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?

---

<div class="post-metadata">

**Author:** ![mark](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark/32/4163_2.png) [@mark](https://community.weweb.io/u/mark)\
**Post date:** [August 17, 2023, 11:49pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/3 "2023-08-17T23:49:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [August 18, 2023, 12:03am UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/4 "2023-08-18T00:03:17Z")

</div>

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:

 ![CleanShot 2023-08-18 at 02.04.51@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/7118a3d4815285911172cda170061d7e4c973dcb.png)

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:

 ![CleanShot 2023-08-18 at 02.02.11@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/11fcd85588e0be946e76cda8106c6615898baae8.png)

---

<div class="post-metadata">

**Author:** ![mark](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark/32/4163_2.png) [@mark](https://community.weweb.io/u/mark)\
**Post date:** [August 18, 2023, 12:06am UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/5 "2023-08-18T00:06:16Z")

</div>

Thanks! You’re a life saver!

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [August 18, 2023, 12:07am UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/6 "2023-08-18T00:07:05Z")

</div>

My pleasure 🙂

---

<div class="post-metadata">

**Author:** ![mark](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark/32/4163_2.png) [@mark](https://community.weweb.io/u/mark)\
**Post date:** [August 21, 2023, 1:31pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/7 "2023-08-21T13:31:20Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [August 30, 2023, 8:35pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/8 "2023-08-30T20:35:30Z")

</div>

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

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

```

See this [link](https://blog.shahednasser.com/how-to-style-an-audio-element/) for styling the default audio player

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

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

```

---

<div class="post-metadata">

**Author:** ![Hekup](https://avatars.discourse-cdn.com/v4/letter/h/a183cd/32.png) [@Hekup](https://community.weweb.io/u/Hekup)\
**Post date:** [September 18, 2023, 8:26am UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/9 "2023-09-18T08:26:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mark](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark/32/4163_2.png) [@mark](https://community.weweb.io/u/mark)\
**Post date:** [September 19, 2023, 12:35pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/10 "2023-09-19T12:35:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [September 19, 2023, 10:55pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/11 "2023-09-19T22:55:51Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![Alexander\_L](https://avatars.discourse-cdn.com/v4/letter/a/b5a626/32.png) [@Alexander\_L](https://community.weweb.io/u/Alexander_L)\
**Post date:** [October 11, 2023, 10:09pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/12 "2023-10-11T22:09:49Z")

</div>

> [@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

---

<div class="post-metadata">

**Author:** ![mark](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mark/32/4163_2.png) [@mark](https://community.weweb.io/u/mark)\
**Post date:** [October 11, 2023, 11:06pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/13 "2023-10-11T23:06:57Z")

</div>

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;

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [October 12, 2023, 4:43pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/14 "2023-10-12T16:43:03Z")

</div>

> [@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](https://docs.weweb.io/workflows/actions/execute-component-action.html).

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

---

<div class="post-metadata">

**Author:** ![Alexander\_L](https://avatars.discourse-cdn.com/v4/letter/a/b5a626/32.png) [@Alexander\_L](https://community.weweb.io/u/Alexander_L)\
**Post date:** [October 13, 2023, 11:03pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/15 "2023-10-13T23:03:37Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [October 16, 2023, 2:40pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/16 "2023-10-16T14:40:06Z")

</div>

Very cool! Looks amazing, Alexander 🙂

---

<div class="post-metadata">

**Author:** ![Mael](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/mael/32/13246_2.png) [@Mael](https://community.weweb.io/u/Mael)\
**Post date:** [March 14, 2024, 2:07pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/17 "2024-03-14T14:07:06Z")

</div>

Hello,

We released a Sound plugin this week  
 ![Screenshot 2024-03-14 at 15.04.17](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/3bed18dc19b250fe477593362a7fc66f0ec15be3.png)

With this plugin you will have access to all these new actions in the workflow  
 ![Screenshot 2024-03-14 at 15.06.30](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/c/c630a20317a054882a38c6c3020e4c49c94f543b.png)

A doc will come shortly 🙂

---

<div class="post-metadata">

**Author:** ![mosinjack](https://avatars.discourse-cdn.com/v4/letter/m/eada6e/32.png) [@mosinjack](https://community.weweb.io/u/mosinjack)\
**Post date:** [June 14, 2025, 2:48pm UTC](https://community.weweb.io/t/how-to-get-audio-player-to-play/3928/18 "2025-06-14T14:48:07Z")

</div>

Interesting issue—I’ve run into something similar when embedding custom audio players. Sometimes browser compatibility or small syntax issues can trip things up, especially with interactive buttons. Also, if you’re planning to use audio players for fun content like **kids jokes** or learning clips[,](https://kidsforjokes.com/) getting that functionality smooth is really important. Curious to know if anyone found a reliable workaround for those controls?