我有一个循环播放音频的网页。经过一段时间后，雨声不再发出错误
“Failed to load resource: net::ERR_CONNECTION_RESET (https://kozysounds.com/audio/rain.m4a )”，
除非重新加载页面，否则无法再次启动。
尝试重播音频而不重新加载页面会产生以下异常：kozysounds.com/:1 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
对于导致它的原因及其仅影响雨音频文件的原因有任何想法吗？
网页在这里：https://kozysounds.com/
使用Javascript：
var audioList = document.querySelectorAll(".audio-file"); // Grab all audio elements
var playButtonList = document.querySelectorAll(".play-button"); //Grab all play buttons
var sliderList = document.querySelectorAll(".slider"); // Grab all sliders
var images = []; // Don't need to use this, it is just for pre-loading images
/* TODO:
- Fix play/pause DOM exception
- Crossfade audio to remove noticeable cutoff
*/
// Preloads images
function preloadImages() {
for (var i = 0; i < arguments.length; i++) {
images[i] = new Image();
images[i].src = preloadImages.arguments[i];
}
}
//-----------------------Button stuff----------------------------
function enablePlayButtons(playButtonList) {
//console.log("Play button list: " + playButtonList);
for (var i = 0; i < playButtonList.length; i++) {
playButtonList[i].addEventListener("mouseover", highlightPlayButton, false);
playButtonList[i].addEventListener("mouseout", unHighlightPlayButton, false);
playButtonList[i].addEventListener("click", play, false);
}
}
function enablePauseButtons(pauseButtonList) {
//console.log("Pause button list: " + pauseButtonList);
for (var i = 0; i < pauseButtonList.length; i++) {
pauseButtonList[i].addEventListener("mouseover", highlightPauseButton, false);
pauseButtonList[i].addEventListener("mouseout", unHighlightPauseButton, false);
pauseButtonList[i].addEventListener("click", pause, false);
}
}
function highlightPlayButton() {
this.src = "./img/play-filled.png";
}
function unHighlightPlayButton() {
this.src = "./img/play.png";
}
function highlightPauseButton() {
this.src = "./img/pause-filled.png";
}
function unHighlightPauseButton() {
//console.log(this);
this.src = "./img/pause.png";
}
// Probably a better way of doing this
function play() {
var audio = this.parentNode.getElementsByClassName("audio-file")[0];
var button = this.parentNode.getElementsByClassName("play-button")[0];
audio.play();
this.src = "./img/pause.png"; // Swap to pause image
button.className = "pause-button";
button.removeEventListener("mouseover", highlightPlayButton, false); // Remove old event listeners
button.removeEventListener("mouseout", unHighlightPlayButton, false);
button.removeEventListener("click", play, false);
enablePauseButtons(this.parentNode.getElementsByClassName("pause-button")); // Enable listeners for the new pause button
}
// Probably a better way of doing this
function pause() {
var audio = this.parentNode.getElementsByClassName("audio-file")[0];
var button = this.parentNode.getElementsByClassName("pause-button")[0];
audio.pause();
this.src = "./img/play.png"; // Swap to play image
button.className = "play-button";
button.removeEventListener("mouseover", highlightPauseButton, false); // Remove old event listeners
button.removeEventListener("mouseout", unHighlightPauseButton, false);
button.removeEventListener("click", pause, false);
enablePlayButtons(this.parentNode.getElementsByClassName("play-button")); // Enable listeners for the new play button
}
//----------------------------------------------------------
function enableSliders(sliderList) {
for (var i = 0; i < sliderList.length; i++) {
var slider = sliderList[i];
noUiSlider.create(slider, {
start: .5,
range: {
'min': 0,
'max': 1
}
});
bindValues(sliderList[i]); // Bind slider value to audio volume
}
}
function bindValues(slider) {
slider.noUiSlider.on('update', function(values, handle) {
slider.parentNode.getElementsByClassName("audio-file")[0].volume = values[handle]; // Get the audio file assoiated with the slider and set its volume
});
}
preloadImages(
"img/handle.png", // Preload the images for better responsiveness
"img/pause.png", // Better than loading images upon event triggers e.g. on mouseover
"img/play.png",
"img/pause-filled.png",
"img/play-filled.png"
);
enablePlayButtons(playButtonList); // Initialize the play buttons
enableSliders(sliderList); // Initialize the sliders
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel='shortcut icon' type='image/x-icon' href='img/favicon.ico'>
<title>Kozy</title>
<link href="https://bootswatch.com/sandstone/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
<link href="css/nouislider.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div class="header"></div>
<div class="title-section">
<h1 id="title">Kozy</h1>
<hr id="title-underline">
<p id="title-note">Work | Study | Focus</p>
</div>
<div class="sound-board">
<div class="sb-row">
<span class="audio-block">
<img class="play-button" src="img/play.png">
<div class="slider" id="rain-slider"></div>
<h2>Rain</h2>
<audio class="audio-file" id="rain" loop preload="auto">
<source src="audio/rain.m4a" type="audio/mp4">
</audio>
</span>
<span class="audio-block">
<img class="play-button" src="img/play.png">
<div class="slider" id="fire-slider"></div>
<h2>Fire</h2>
<audio class="audio-file" id="fire" loop preload="auto">
<source src="audio/fire.m4a" type="audio/mp4">
</audio>
</span>
<span class="audio-block">
<img class="play-button" src="img/play.png">
<div class="slider" id="waves-slider"></div>
<h2>Waves</h2>
<audio class ="audio-file" id="waves" loop preload="auto">
<source src="audio/waves.m4a" type="audio/mp4">
</audio>
</span>
<span class="audio-block">
<img class="play-button" src="img/play.png">
<div class="slider" id="cafe-slider"></div>
<h2>Cafe</h2>
<audio class ="audio-file" id="cafe" loop preload="auto">
<source src="audio/cafe.m4a" type="audio/mp4">
</audio>
</span>
<span class="audio-block">
<img class="play-button" src="img/play.png">
<div class="slider" id="jungle-slider"></div>
<h2>Jungle</h2>
<audio class ="audio-file" id="jungle" loop preload="auto">
<source src="audio/jungle.m4a" type="audio/mp4">
</audio>
</span>
<span class="audio-block">
<img class="play-button" src="img/play.png">
<div class="slider" id="thunder-slider"></div>
<h2>Thunder</h2>
<audio class ="audio-file" id="thunder" loop preload="auto">
<source src="audio/thunder.m4a" type="audio/mp4">
</audio>
</span>
</div>
</div>
<div class="footer">
<a target="_blank" href="https://kozysounds.com/sources.html">Audio Sources</a>
<span id="divider">|</span>
<a target="_blank" href="http://newtopwallpapers.com/wp-content/uploads/2013/04/Rain-Falling-on-Trees.jpeg">Background Source</a>
</div>
<!-- Scripts-->
<script src="js/nouislider.min.js"></script>
<script src="js/index.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.2/firebase-app.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "apiKey",
authDomain: "authDomain",
databaseURL: "databaseURL",
storageBucket: "storageBucket",
messagingSenderId: "messagingSenderId"
};
firebase.initializeApp(config);
</script>
</body>
</html>