みなさん、
これは私のオーディオ再生のサンプル コードです。バッファリングして 10 秒後に再生を開始します。その後、私が試したシナリオと同じオーディオを再度再生することはありません。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>audio.js</title>
<script src="./audiojs/audio.min.js"></script>
<link rel="stylesheet" href="./includes/index.css" media="screen">
<style>
.play-pause {
display: none;
}
.audiojs {
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>audio.js</h1>
</header>
<audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" id="player"></audio>
<label id="audio_stats"></label>
<script>
var element = document.getElementById("player");
var settings = {
autoplay: false,
loop: false,
preload: true,
swfLocation: 'audiojs/audiojs.swf',
trackEnded: function (e) {
document.getElementById("audio_stats").innerText = "Completed...";
}
}
audiojs.events.ready(function () {
var a = audiojs.create(element, settings);
var count = 11;
var counter = setInterval(timer, 1000);
function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
a.play();
document.getElementById("audio_stats").innerText = "Playing...";
return;
}
document.getElementById("audio_stats").innerText = "Will Start in " + count + " sec.";
}
});
</script>
</body>
</html>
そして、これは参照ですhttps://kolber.github.io/audiojs/私のサイトには、ほぼ 17 のオーディオがあります。各 div は単一のオーディオで囲みます。最初の div には id "player(手段 1 オーディオ)" のオーディオがあり、2 番目の div "player1(手段 2 オーディオ)" にも同様にオーディオがあります。前と次のボタンがあります。問題は、17 のオーディオすべてがバッファリングされ、同時に再生されることです。代わりに、「プレーヤー (1 番目のオーディオを意味する)」は、ページが開かれるとバッファを開始します。次のボタンをクリックすると、2 番目のオーディオがバッファを開始するはずです。また、前のボタンを押しても、「プレーヤー (1 番目のオーディオを意味する)」は 1 回だけ再生されるため、再度再生する必要はありません。同様に、すべてのオーディオに対しても機能します。私はこの問題に長い間苦労しています。