How to change the position of audio in JavaScript?

Xander

I'm trying to using a slider to change the position of an audio track. The trouble I'm having is that when I mousedown on the slider the audio just stops rather than altering the position. I tried removing my addeventlistener ended function but that didn't solve the problem.

Any help would be greatly appreciated.

HTML:

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

JavaScript:

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

    // 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) {
        if(seeking) {
            seekslider.value = event.clientX = seekslider.offsetLeft;
            seekto = music.duration * (seekslider.value / 100);
            music.currentTime = seekto;
        }
    }

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

    //EVENT HANDLERS
    playpausebtn.addEventListener("click", playAudio);
    seekslider.addEventListener("mousedown", function (event) { seeking = true; seek(event); });
    seekslider.addEventListener("mousemove", function (event) { seek(event); });
    seekslider.addEventListener("mouseup", function () { seeking = false; });
    volumeslider.addEventListener("mousemove", setVolume);
});
evolutionxbox

I would recommend removing the following line:

seekslider.value = event.clientX = seekslider.offsetLeft;

This is because you are setting the value of seekslider before you use it, which is counter productive, as the next line music.duration * (seekslider.value / 100); does exactly what you want.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How to Change the HTML5-audio Volume or Track Position with a Slider?

From Dev

How to change Javascript audio object src?

From Dev

Javascript - Seek audio to certain position when at exact position in audio track

From Dev

Javascript - Problems to change the Position

From Dev

How to change position of the automatic filename numbering with javascript as InDesign exports files?

From Dev

How to capture audio in javascript?

From Dev

How to change growl position

From Dev

How to change position of a JLabel?

From Dev

How to change position of a JLabel?

From Dev

How to change position of UINavigationBar?

From Dev

How to change the position of Polybar?

From Dev

How To Change The Position Of A Class

From Dev

How to change AVCaptureSession audio volume?

From Dev

javascript change position depending on number

From Dev

Change position of an option using JavaScript

From Dev

javascript change position depending on number

From Dev

Change image with javascript mouse position?

From Dev

How to save the position of the audio file? objective -C

From Dev

change this.position of audio in sound manager 2 while playing

From Dev

Trying to change the src of audio tag using javascript

From Dev

How to position a tag with Javascript?

From Dev

How to change button control position?

From Dev

How to change the position of buttons in DataTables

From Dev

How to change the position of this navigation style?

From Dev

How to change first view position

From Dev

How to change UITabBarItem Badge position?

From Dev

how to change the position of app bar?

From Dev

How to change canvas position in Unity?

From Dev

How to change position of imageview in android?

Related Related

HotTag

Archive