Having trouble with the input range slider on Chrome? No worries, it's working perfectly fine

Question

Having trouble with the input range slider on Chrome? No worries, it's working perfectly fine

I'm currently facing an issue with an input range slider that controls the position of an audio track. It seems to work perfectly in Firefox, but in Chrome, the slider gets stuck and doesn't move when dragged. There is a function in place that updates the slider's position by 1 each time the audio's currentTime changes, which might be causing the problem. Any assistance with resolving this would be highly appreciated.

Below is the HTML code:

<audio id="music">
  <source src="media/mexico-music.mp3" type="audio/mpeg"/>
</audio>
  <button id="playpausebtn" class="play"></button>
  <span id="curtimetext">00:00</span>
  <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
  <span id="durtimetext">00:00</span>
  <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">

And here is the JavaScript code:

$(document).ready(function () {
    // JavaScript functions
});

javascript jquery html audio

Answer 1

Answer №1

It seems unnecessary to redeclare curtimetext and durtimetext. Instead of using a combination of mouseup and mousedown events, you could just utilize the change event.

Here's a functional example:

$(document).ready(function () {
    var music = document.getElementById("music"),
        playpausebtn = document.getElementById("playpausebtn"),
        seekslider = document.getElementById("seekslider"),
        volumeslider = document.getElementById("volumeslider"),
        curtimetext = document.getElementById("curtimetext"),
        durtimetext = document.getElementById("durtimetext"),
        seeking,
        seekto;

    // Reset slider back to 0 
    seekslider.value = 0;


    // PLAY/PAUSE AUDIO
    function playAudio() {
        if (music.paused) {
            music.play();
            playpausebtn.className = "pause";
        } else {
            music.pause();
            playpausebtn.className = "play";
        }
        music.addEventListener('ended', function () {
            playpausebtn.className = "Play";
        });
    }

    // SEEK MUSIC POSITION
    function seek(event) {
            seekto = music.duration * (this.value / 100);
            music.currentTime = seekto;
    }

    // VOLUME CONTROL
    function setVolume() {
        music.volume = volumeslider.value / 100;
    }

    // UPDATE MUSIC TIME
    function seektimeupdate() {
        var newtime = music.currentTime * (100 / music.duration);
        seekslider.value = newtime;
        var curmins = Math.floor(music.currentTime / 60),
            cursecs = Math.floor(music.currentTime - curmins * 60),
            durmins = Math.floor(music.duration / 60),
            dursecs = Math.floor(music.duration - durmins * 60);
        // Adds 0 in front of single digit numbers
        if (cursecs < 10) { cursecs = "0" + cursecs; }
        if (dursecs < 10) { dursecs = "0" + dursecs; }
        if (curmins < 10) { curmins = "0" + curmins; }
        if (durmins < 10) { durmins = "0" + durmins; }
        curtimetext.innerHTML = curmins + ":" + cursecs;
        durtimetext.innerHTML = durmins + ":" + dursecs;
    }

    // EVENT HANDLERS
    playpausebtn.addEventListener("click", playAudio);
    seekslider.addEventListener("change", seek);
    
    volumeslider.addEventListener("mousemove", setVolume);
    music.addEventListener("timeupdate", seektimeupdate);
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<audio id="music">
  <source src="//mdn.mozillademos.org/files/2587/AudioTest%20(1).ogg" type="audio/mpeg"/>
</audio>
  <button id="playpausebtn" class="play">
  play
  </button>
  <span id="curtimetext">00:00</span>
  <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
  <span id="durtimetext">00:00</span>
  <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>

For more information on the change event, visit mdn here: https://developer.mozilla.org/en-US/docs/Web/Events/change

Answer 2

It seems unnecessary to redeclare curtimetext and durtimetext. Instead of using a combination of mouseup and mousedown events, you could just utilize the change event.

Here's a functional example:

$(document).ready(function () {
    var music = document.getElementById("music"),
        playpausebtn = document.getElementById("playpausebtn"),
        seekslider = document.getElementById("seekslider"),
        volumeslider = document.getElementById("volumeslider"),
        curtimetext = document.getElementById("curtimetext"),
        durtimetext = document.getElementById("durtimetext"),
        seeking,
        seekto;

    // Reset slider back to 0 
    seekslider.value = 0;


    // PLAY/PAUSE AUDIO
    function playAudio() {
        if (music.paused) {
            music.play();
            playpausebtn.className = "pause";
        } else {
            music.pause();
            playpausebtn.className = "play";
        }
        music.addEventListener('ended', function () {
            playpausebtn.className = "Play";
        });
    }

    // SEEK MUSIC POSITION
    function seek(event) {
            seekto = music.duration * (this.value / 100);
            music.currentTime = seekto;
    }

    // VOLUME CONTROL
    function setVolume() {
        music.volume = volumeslider.value / 100;
    }

    // UPDATE MUSIC TIME
    function seektimeupdate() {
        var newtime = music.currentTime * (100 / music.duration);
        seekslider.value = newtime;
        var curmins = Math.floor(music.currentTime / 60),
            cursecs = Math.floor(music.currentTime - curmins * 60),
            durmins = Math.floor(music.duration / 60),
            dursecs = Math.floor(music.duration - durmins * 60);
        // Adds 0 in front of single digit numbers
        if (cursecs < 10) { cursecs = "0" + cursecs; }
        if (dursecs < 10) { dursecs = "0" + dursecs; }
        if (curmins < 10) { curmins = "0" + curmins; }
        if (durmins < 10) { durmins = "0" + durmins; }
        curtimetext.innerHTML = curmins + ":" + cursecs;
        durtimetext.innerHTML = durmins + ":" + dursecs;
    }

    // EVENT HANDLERS
    playpausebtn.addEventListener("click", playAudio);
    seekslider.addEventListener("change", seek);
    
    volumeslider.addEventListener("mousemove", setVolume);
    music.addEventListener("timeupdate", seektimeupdate);
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<audio id="music">
  <source src="//mdn.mozillademos.org/files/2587/AudioTest%20(1).ogg" type="audio/mpeg"/>
</audio>
  <button id="playpausebtn" class="play">
  play
  </button>
  <span id="curtimetext">00:00</span>
  <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
  <span id="durtimetext">00:00</span>
  <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</body>
</html>

For more information on the change event, visit mdn here: https://developer.mozilla.org/en-US/docs/Web/Events/change

Answer 3

Answer №2

Thanks to the assistance of @azs06, I was able to successfully implement this solution that works on both Firefox and Chrome browsers.

In order to streamline the code, I decided to remove all seekslider .addEventListener lines and replaced them with just one line using a 'change' event instead of mousedown/up events.

The new line of code added is:

seekslider.addEventListener("change", function (event) { seeking = true; seek(event); });

I plan to update the question with the revised code for clarity.

Answer 4

Thanks to the assistance of @azs06, I was able to successfully implement this solution that works on both Firefox and Chrome browsers.

In order to streamline the code, I decided to remove all seekslider .addEventListener lines and replaced them with just one line using a 'change' event instead of mousedown/up events.

The new line of code added is:

seekslider.addEventListener("change", function (event) { seeking = true; seek(event); });

I plan to update the question with the revised code for clarity.

Having trouble with the input range slider on Chrome? No worries, it's working perfectly fine

Answer №1

Answer №2

Similar questions

Using an Angular route to trigger the resolution of data from a service

Responsive design element order rearrangement

My custom CSS being overridden by Bootstrap styles

Achieving Text Wrapping Around Unconventional Shapes Using CSS

The JQuery duplication process did not function as anticipated

What modifications can be made to the code in order to show the upload progress for each individual file when uploading multiple files simultaneously?

Connects URLs to the displayed outcomes in jQuery Auto-suggest Interface

Updating Object Properties in Vue.js 2.0 using Methods

What is the best way to prompt users to submit comments with a popup textarea box?

Creating consistent image sizes in Bootstrap

I need help figuring out how to represent a nested array within an array of objects within my data instance in Vue

Updating the state after receiving API results asynchronously following a function call

The resulting line will consist of the discovered string

Working with dynamic checkbox values in VueJS 2

The mysterious nature of view binding in Ember.js

Is it possible to create a popup window that remains fixed at the top edge of the screen but scrolls along with the rest of the page if

How do you obtain the string name of an unknown object type?

The message "In Angular, there is no such property as 'data' in the type '{ user: User; session: Session; error: ApiError; }'."

What is the process for invoking an External Javascript Firestore function within a Typescript file?

I will evaluate two arrays of objects based on two distinct keys and then create a nested object that includes both parent and child elements