Crying for help to use audio player in CMS dynamic list

[Dovydas_Sidabras]

Hey, I’m trying to insert custom audio player (when I say audio player I actually mean one button that says “play”) into dynamic CMS list because each item has unique Audio URL. Sounds easy right? Well not really I’ve been stuck on this for 3 days.

So Im adding HTML embed, placing it into Collection list item, and paste simple player code, “+add field” item URL as source.

AND IT DOESN’T WORK!

What happens? Well each button on each list item plays the same audio file…

Working soliution is use HTML

Even tho this simple player works (means each collection item plays coresponding audio file) HOWEVER it looks ugly as hell. Because there is 100’s vocabualry words on one page I can’t afford to use that bulky native browser player.

Oh one more thing: The same issue happens not only with audio, I have the same issue whenever I use javascript in embed code (for example tried to make form selection where

is acing as radio button, and all of the options comes from CMS collection - same thing happened, one and the same item was pulled no matter what select)

I’m not developer, but is this a bug or I’m missing something?

---

Here is my site Read-Only: https://preview.webflow.com/preview/ltw-site-ebc633?utm_medium=preview_link&utm_source=designer&utm_content=ltw-site-ebc633&preview=d11121f8cf756790a7471060acb5202c&pageId=5edf94a1962474e71d914068&itemId=5f0a9b7788788a2ced8fe14a&mode=preview
(how to share your site Read-Only link)

[sam-g]

@Dovydas_Sidabras - it looks to me like you are trying to pull this field into the audio src value:

Which is not going to work, it’s going to put that text value in.

Don’t you want to place the value of this field instead:

Can you post a live link of this site so I can actually inspect the code and see what values are being pulled in?

[Dovydas_Sidabras]

Oh sorry, I made it more clear to see in the picture, The link is actually looks like this:

cloudfunctions.net/textspeech?text={{{ADD HERE THE CHINESE FIELD}}}&ln=en

So it turns text in the url into audio and returns back audio file.
That part works fine, and when you open that link its an audio file.

[Dovydas_Sidabras]

Live link of the website is
https://ltw-site-ebc633.webflow.io/videos/free-l1e1

[sam-g]

Sorry if I’m misunderstanding you, but it appears to be working on the live site you sent me. Are those manually coded? Or am I not understanding what the issue is?

[Dovydas_Sidabras]

Yeah - those on the live site is working because I’m using simple audio tag from the browser:

However: If I want to use custom control buttons, or simple make the text clicable as “play audio” , I need to use Javascript, for example:

<audio id="player" src="vincent.mp3"></audio>
<div> 
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
</div>

This does not work anymore. It takes one item and repeats in all. IF you want I can put this code and you will see.

[sam-g]

@Dovydas_Sidabras - yes put the code in an re-publish.

[Dovydas_Sidabras]

Published, You can check it now. @sam-g

[sam-g]

@Dovydas_Sidabras - okay, so the issue is each player has the same id, and when you are using the document.getElementById it is just finding the first instance of that id and playing that, not the currently clicked play button.

Try something like this:

[Dovydas_Sidabras]

Oh right! I’ve tried that before using “slug” field, but it didn’t work and I gave up on it too fast. This one work! Thanks a lot!

[joestory (Joe)]

I’m trying to follow along with your solution here but nothing happens on click. When inspecting the element, I get the following error:

document.getElementByID(‘playeryour-love-remixed’)', ‘document.getElementbyID’ is undefined)

In this case a {{Name}} field is used for the ‘your-love-remixed’ portion of that string.

Read Only Share Link

I would like to have the middle button I have designed be the functional one eventually.