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.

<h1>{dir.dv_talent}</h1>
<h2>{{total_time}}</h2>

<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" />
</audio>

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.

<h2>{{dir.dv_file}}</h2>

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.
0
 
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.)
0
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.