Audio Player Autofade value PHP

1

Hi Folks

Beginner coder here flipping between Javascript and JQuery. I’m working on a customised audio player and have a button that onclick will fade out the music in 3 secs (this is just a working time) but I would like the user to see the countdown of the reducing volume. The code is:

 onclick="$(document).ready(function(){

        $('#<?php echo $track;?>')[0].volume = .5;
         $('#<?php echo $track;?>').animate({volume: 0}, 3000); 
        });

    $('#<?php echo $track;?>').promise().done(function() { 
    $('#<?php echo $track;?>').trigger('pause');
    });
      
    ">

I have a div where I would like the countdown to go:

  <div class="test"><p>Time left: <span></span></p></div>

I thought this code

$('.test span').text(volume);

Would show me the volume but no matter where in the main body of the code I place it nothing appears in the div. Can anyone tell me where I’ve gone wrong please or if it is even possible.

Many thanks

Andrew

2

I’m assuming you put this in your JS. I ran this in ES6 and the error reads anUnexpected Indent associated to python on line one.

3

Hi
Thanks for replying. I’m afraid I’ve no idea what you mean by ES6 and Unexpected Indent. I’m very new to Javascript coding and just feeling my way around. This code is on my webpage as part of an audio player that I’m designing.

Regards Andrew

4

where did you run this? how did Python came up?

5

you have written PHP, it’s an even different language. Did you mean to use PHP?

6

animate provides a step function that give you access to the value of the property being animated. Not really sure how you plan to show the decimal value of the volume property.

This isn’t PHP but I’m sure you get the example:

<audio id="track" src="https://www.bensound.com/bensound-music/bensound-moose.mp3" controls></audio>
<button id="fade">Fade</button>
<div id="volume"></div>

$("#fade").click(() => {
  $("#track")[0].volume = 0.5;
  $("#track").animate({ volume: 0 }, { duration: 3000,
    step: function (now, fx) {
      $("#volume").text(now);
    }
  });
});
7

Pytutor under Javascript, but the error part referenced python. I’m not really sure why although this has php inside the JS code. I’m guessing that pytutor.com is mostly error checking at this point.

8

ES6 is the latest updated version of Javascript.

9

Hi Lasjorg,

Many thanks for your reply. You have given me plenty to work at and work out :-).

10

I hope I can explain myself here.

I have an auto fade button for my audio that I’m working/learning on. The code below is in the input type=“button” :

onclick="$(document).ready(function()
{
    $('#<?php echo $track;?>')[0].volume = .5;
    $('#<?php echo $track;?>').animate({volume: 0}, 30000); 
  });

  $('#<?php echo $track;?>').promise().done(function() { 
  $('#<?php echo $track;?>').trigger('pause');
});
    "

This works really well.

I also have a volume slider:

<script>

var audio<?php echo $track;?> = document.getElementById("<?php echo $track;?>");
var slider<?php echo $track;?> = document.getElementById("slider<?php echo $track;?>");
var display<?php echo $track;?> = document.getElementById("display<?php echo $track;?>");


slider<?php echo $track;?>.addEventListener("input", sliderActions);

function sliderActions( )
{
  var newVolume = slider<?php echo $track;?>.value;

  display<?php echo $track;?>.innerText = newVolume; // range 0 to 100
  audio<?php echo $track;?>.volume = newVolume / 100; // range 0 to 1 
}
</script>

My issue is the auto fade button always starts from .5 (as I’ve set it). I would like the auto fade button to start from where the user leaves the volume slider value. I have tried to put the variables from the slider script at the volume= part of the auto fade button. I don’t know if I’m using the correct syntax of even if it’s possible. Both scripts are within a form tag and accessing the sql results. Nothing works for me. If someone could point me to the correct way to use a variable out of one script and into another I would be very grateful.

Many thanks

Andrew