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:
- Press the
Playbutton to play the audio file all the way through to the end (until it stops) - Press the
Loopbutton - Press the
Playbutton
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