javascript - 开启循环后如何让<audio>播放

Question

我正在开发一个简单的网络音频播放器。我已经复制并粘贴了下面的 HTML 和 JS，但不能包含音频文件，所以要查看工作示例，请查看 GitHub 页面:jsejcksn.github.io/audio-player/

一切都像我想要的那样工作，除了我注意到一个问题，它在 Chrome 桌面(40.0.2214.91，OS X 上)的特定条件下无法播放。我还在 Safari 桌面(OS X 上的 8.0.2)和 iOS 上的 Chrome 上进行了测试，并且在这些设备上运行良好。以下是重现问题的步骤:

按Play按钮将音频文件一直播放到最后(直到停止)

按Loop按钮

按Play按钮(不播放!)

我的 JavaScript 有问题吗？ (这似乎比 Chrome 桌面中的错误更有可能，但我不确定。)

// 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 == true) {
		player.play();
		btnPlayPause.innerHTML = 'Pause';
		console.log('Music playing');
		}
	else if (player.paused == false) {
		player.pause();
		btnPlayPause.innerHTML = 'Play';
		console.log('Music paused');
		}
	}

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>

Answer 1

试试看ended音频播放器的属性，cf. here .如果在按下循环按钮之前当前播放已经结束，您可以重置currentTime就像在您的重播功能中一样，然后播放。