lundi 5 janvier 2015

HTML5 audio jumping position

This is my first Stackoverflow 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://ift.tt/1BBiCHI), 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?


Thanks!


Aucun commentaire:

Enregistrer un commentaire