dimanche 25 janvier 2015

I am working on a simple web audio player. I have copied and pasted the HTML and JS below, but can't include the audio files, so to see the working example, check out the GitHub page: http://ift.tt/1EivpDw


Everything works like I want it to except I've noticed a problem, where it won't play under a certain condition. I've only tested on Chrome desktop (on OS X 40.0.2214.91) and Chrome on iOS (it works fine on iOS). Here are the steps to reproduce the problem:



  1. Press the Play button to play the audio file all the way through to the end (until it stops)

  2. Press the Loop button

  3. Press the Play button


Is there a problem with my JavaScript? (That seems a lot more likely than a bug in Chrome desktop.)





// Variables ----------

var player = document.getElementById('player');
var btnLoop = document.getElementById('btn-loop');
var btnReplay = document.getElementById('btn-replay');
var btnPlayPause = document.getElementById('btn-play-pause');


// Functions ----------

function endOfAudio() {
btnPlayPause.innerHTML = 'Play';
console.log('Music stopped');
}

function loop() {
if (player.loop == true) {
player.loop = false;
btnLoop.innerHTML = 'Loop';
console.log('Looping off');
}
else if (player.loop == false) {
player.loop = true;
btnLoop.innerHTML = 'Turn off Loop';
console.log('Looping on');
}
}

function playPause() {
if (player.paused == false) {
player.pause();
btnPlayPause.innerHTML = 'Play';
console.log('Music paused');
}
else {
player.play();
btnPlayPause.innerHTML = 'Pause';
console.log('Music playing');
}
}

function replay() {
player.currentTime = 0;
player.play();
btnPlayPause.innerHTML = 'Pause';
console.log('Music playing from start');
}


// EventListeners ----------

btnLoop.addEventListener('click', loop);
btnPlayPause.addEventListener('click', playPause);
btnReplay.addEventListener('click', replay);
player.addEventListener('ended', endOfAudio);



<header>
<h1>Audio Player</h1>
</header>

<div id="app">
<audio id="player" controls preload="auto" src="audio/audio.mp3"></audio>

<button id="btn-replay">Replay</button>
<button id="btn-play-pause">Play</button>
<button id="btn-loop">Loop</button>
</div>



Aucun commentaire:

Enregistrer un commentaire