HTML5 audio jumping position

Question

I have recently been making custom controls for HTML5 audio, using mainly buttons and ranges. I had been testing it locally, on Google Chrome 39. All was working well.

When I uploaded it to my website, I went to its web address (http://barney.sweet.uk.net/byteup/jsfemto/), and hit play. After about six seconds, the audio went to the end (242 seconds), and finished playing. The local version, that was the same file, did not do this. The same thing happened in Firefox and IE: the online file jumped, the offline one didn't.

My problem is that the online and offline version of the file are exactly the same, but they work differently on the same browser.

Here is my JavaScript code:

<script>

    var femtoPlayer = femtoPlayer || {};

    femtoPlayer.init = function() {

        console.log('Welcome to JSFemto, the lightweight music player by ByteUp! Software, now ported to JavaScript!')

        var player = document.getElementById('player'), 
            songProgress = document.getElementById('songProgress'),
            name = document.getElementById('source').getAttribute('src'),
            playing = false,
            duration,
            mousedown;

        player.addEventListener('loadedmetadata', function() {
            duration = this.duration;
            console.log('Song duration is:', duration);
        });

        console.log('JSFemto has loaded:', name);
        document.getElementById('name').innerHTML = name;

        player.addEventListener('timeupdate', function() {
            console.log('Time update to:', this.currentTime);
            var currentTime = this.currentTime / duration;
            if (!mousedown){
                songProgress.value = currentTime;
            }
        });

        document.getElementById('playPauseButton').addEventListener('click', function() {
            if (!playing) {
                player.play();
                console.log('Playing...');
                playing = true;
                document.getElementById('playPauseButton').innerHTML = 'Pause';
            }
            else {
                player.pause();
                console.log('Paused...');
                playing = false;
                document.getElementById('playPauseButton').innerHTML = 'Play';
            }

        });
        document.getElementById('stopButton').addEventListener('click', function() {
            console.log('Stop button clicked');
            player.pause();
            player.currentTime = 0;
            playing = false;
            document.getElementById('playPauseButton').innerHTML = 'Play';
        });

        document.getElementById('volSlider').addEventListener('input', function() {
            console.log('Volume changed');
            player.volume = this.value;
        });

        songProgress.addEventListener('mousedown', function(){
            mousedown = true;
        });
        songProgress.addEventListener('mouseup', function(){
            mousedown = false;
        });

        songProgress.addEventListener('change', function() {
            console.log('Song position changed');
            var position = this.value * duration;
            player.currentTime = position;
            player.play();
            playing = true;
            document.getElementById('playPauseButton').innerHTML = 'Pause';
        });
    };

    console.log('Running function: femtoPlayer.init()')
    femtoPlayer.init();

</script>

And here is the main part of the HTML:

<audio id="player">
    <source src="My Land.mp3" type="audio/mpeg" id="source" />
</audio>
<div class="playerBorder">
    <div id="name">
        JSFemto
    </div>
    <br>
    <button id="playPauseButton" class="big button">Play</button>
    <button id="stopButton" class="med button">Stop</button>
    <input type="range" class="small range" min="0.0" max="1.0" value="1.0" step="0.05" id="volSlider"  />
    <br>
    <input type="range" class="wide range" min="0.0" max="1.0" value="0" step="0.01" id="songProgress" />
    <br>
</div>

Is there anything wrong with my code?

Answer 1

I downloaded your MP3 file from the server (http://barney.sweet.uk.net/byteup/jsfemto/My%20Land.mp3), and the file is only 221KB and iTunes plays it exactly the same way you described.

Please check if the file is uploaded without corruption in the middle.

Answer 2

You code is:

var currentTime = this.currentTime / duration;

But should be:

var currentTime = this.currentTime;

Anyway, take in mind that currentTime yet from 2013 html5 spec is a readonly attribute so even when fixed-up this script won't work in Chrome/Chromium, Opera, etc.