Got a question about the file type.

• inspecto0

• October 25, 2020 at 8:52 pm

Hello, i am new into programmering and still learning 🙂 So i hope some on can help me! If i am asking the question on the wrong place please let me know 🙂

I am using sage10 + acf pro

So i am creating a header with a play button and if you press on it you can listen to a song.
I have created this with some HTML and Javascript and got it worked. But the song is imported with a custom url and i want to use the file type for it. Any tips using something different is welcome.

But i cant understand how to accomplish this. Is it even possible what i am trying? I want the variable $music instead of the url in the javascript file.

HTML: views/partials/header.blade.php

@php
$music = get_field(‘music’);
@endphp

<i id=”play-pause-button” class=”fas fa-play-circle”></i>

Javescript: assets/scripts/music.js

var audio = new Audio(“http://project.een/app/uploads/2020/10/alert_v2.mp3”);

$(‘#play-pause-button’).on(“click”,function(){
if($(this).hasClass(‘fa-play-circle’))
{
$(this).removeClass(‘fa-play-circle’);
$(this).addClass(‘fa-pause’);
audio.play();
}
else
{
$(this).removeClass(‘fa-pause’);
$(this).addClass(‘fa-play-circle’);
audio.pause();
}
});

audio.onended = function() {
$(“#play-pause-button”).removeClass(‘fa-pause’);
$(“#play-pause-button”).addClass(‘fa-play-circle’);
};

I hope some on can help me or explain to me what the best options are 🙂

• John Huebner

• October 26, 2020 at 12:59 am

Since you are using a separate JS files you need to get the value into JS so that your script can use it.

You do this by localizing the script. See https://developer.wordpress.org/reference/functions/wp_localize_script/ and look at the user contributed notes.

Basically you
1) register the script
2) localize the script using values in acf fields
3) in your script you get the value from the js object created in step 2 to get the value