HTML代码:随机播放字母对应的MP3音频
<!DOCTYPE html>
<html>
<head>
<title>随机播放MP3</title>
</head>
<body>
<button onclick="startTest()">开始测试</button>
<p id="test"></p>
<script>
var alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
var audio = new Audio();
var timer1, timer2, timer3;
<pre><code> function playMP3(file) {
audio.src = file;
audio.play();
}
function startTest() {
clearTimeout(timer1);
clearTimeout(timer2);
clearTimeout(timer3);
var randomIndex = Math.floor(Math.random() * alphabet.length);
var letter = alphabet[randomIndex];
document.getElementById('test').innerHTML = letter;
timer2 = setTimeout(function() {
playMP3(letter.toLowerCase() + '.mp3');
}, 5000);
timer3 = setTimeout(function() {
document.getElementById('test').innerHTML = '';
}, 8000);
timer1 = setInterval(function() {
randomIndex = Math.floor(Math.random() * alphabet.length);
letter = alphabet[randomIndex];
document.getElementById('test').innerHTML = letter;
timer2 = setTimeout(function() {
playMP3(letter.toLowerCase() + '.mp3');
}, 5000);
timer3 = setTimeout(function() {
document.getElementById('test').innerHTML = '';
}, 8000);
}, 3000);
}
</script>
</body>
</code></pre>
</html>
原文地址: https://www.cveoy.top/t/topic/oX4x 著作权归作者所有。请勿转载和采集!