Passing A Variable to Audio Player

I am doing an HTTP post call to a database to pull information to load an audio player.

I am successful getting a JSON string with the desired details.

What I'm having trouble with is passing one of the JSON variables to the audio player as the source.

Here's a bit of code that shows what I'm trying to do.


<audio id="player" my-audio>
    <source src="/radio/{{dir.dv_file}}.ogg" type="audio/ogg" />
    <source src="/radio/{{dir.dv_file}}.mp3" type="audio/mpeg" />

Open in new window

So what works is the <h1> tag that displays the Talent Name and the <h2>Tag that gives the total time.  I also know there is valid data for dir.dv_file but when I inspect the code, it shows it as {{dir.dv_file}}.

So what that indicates to me is that the {{dir.dv_file}} is not converted to the passed variable inside of the <audio> tag.

So my question is how do I get that variable to be passed within that <audio> tag.
Paul KonstanskiProject SpecialistAsked:
Who is Participating?
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
Try adding this to your code.


Open in new window

Your code fragment is to small to guess at how it might work.

If a client hired me for something like this, I'd convert all the variables you're using... which look like maybe HAML... Unsure...

Anyway, I'd convert all these {{varname}} to Javascript variables, so I could inspect them + see their exact value.
Paul KonstanskiProject SpecialistAuthor Commented:
Thanks for the insight. I had done some testing with variables like that outside of the <audio> tag and they worked fine. I also read something elsewhere that mentioned that they may not carry over into the <audio> section. I came up with another work around for now using PHP (which I know is cheating but for now it works fine.)
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.