Not sure why this impl won’t get audio to continually loop

by

I have been working on a custom start page for my browsers and wanted to get them to be able to play all my favorites. I have embedded all the songs using this format:

<audio src="Media/(Artist)/(song)" controls preload></audio>

Which is working fine, however I wanted to add a repeat feature so I could just let the song play continually because that is how I like to listen to music, and so I added a checkbox like so:

<h2>
  <input type="checkbox" id='Repeat_Check' unchecked>
  <label for="Repeat_Check">Repeat</label>
</h2>

And using that I added this js code to attempt to get it to check if the song had ended while the repeat checkbox is true and if it did it should restart the audio:

var Playing_Audio = document.getElementById('audio');
var Repeat_Checkbox = getElementById('Repeat_Check')
var Repeat_Checker = this.Repeat_Checkbox.CheckOnClick = true;
Playing_Audio.onplay = function() {while(Repeat_Checker == true) {if(Playing_Audio.paused == true) {Playing_Audio.play}}};

That is the section that doesn’t seem to work correctly, have I just made a dumb mistake or is this really bad code?

Note: all audio is stored in the Media folder of the project

I have attempted googling it but all the solutions seemed very complicated and I wanted to use code I could completely understand. I have played around with it and this is the best version I have made

  • this.Repeat_Checkbox.CheckOnClick = true; is not standard JavaScript. Looks like C#

    – 

  • Welcome to Stack Overflow! Please visit the help center, take the tour to see what and How to Ask. Do some research. If you get stuck, post a minimal reproducible example of your attempt, noting input and expected output using the [<>] snippet editor.

    – 

  • oh it makes sense that I would do something like that as I use c languages a lot more. What would you recommend I use instead?

    – 

  • checkbox property, should be var Repeat_Checker = Repeat_Checkbox.checked;

    – 

The id for the checkbox is “Repeat_Check,” but in your JavaScript code, you’re trying to get it using getElementById(‘Repeat_Checkbox’). It should be document.getElementById(‘Repeat_Check’).

The attribute for an unchecked checkbox is not unchecked, but unchecked should be false. You can change it to checked initially if you want the checkbox to be checked by default.

There’s a syntax error in your loop condition. Instead of while(Repeat_Checker == true), you should use while (Repeat_Checker). Also, you should use Repeat_Checkbox.checked to check if the checkbox is checked.

In your loop, you have Playing_Audio.play. It should be Playing_Audio.play().

Here’s a corrected version of your JavaScript code:

var Playing_Audio = document.getElementById('audio');
var Repeat_Checkbox = document.getElementById('Repeat_Check');
var Repeat_Checker = Repeat_Checkbox.checked; // initial value

Playing_Audio.onended = function() {
    if (Repeat_Checker) {
        Playing_Audio.currentTime = 0;
        Playing_Audio.play();
    }
};

// Update the repeat checker when the checkbox changes
Repeat_Checkbox.addEventListener('change', function() {
    Repeat_Checker = this.checked;
});

This code sets up an event listener for the ended event of the audio element. When the audio ends, it checks if the repeat checkbox is checked. If it is, it resets the current time of the audio and plays it again.

Additionally, I added an event listener for the checkbox change event to update the Repeat_Checker variable whenever the checkbox is checked or unchecked.

Leave a Comment