程序员帮我写一个html代码 要求 字母表所有字点击播放不同的mp3 设置考试按钮随机展示字母3秒延时2秒后播放对应mp3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字母表</title>
</head>
<body>
<h1>字母表</h1>
<p>点击字母播放对应的MP3：</p>
<div>
<button onclick="playMP3('a')">A</button>
<button onclick="playMP3('b')">B</button>
<button onclick="playMP3('c')">C</button>
<button onclick="playMP3('d')">D</button>
<button onclick="playMP3('e')">E</button>
<button onclick="playMP3('f')">F</button>
<button onclick="playMP3('g')">G</button>
<button onclick="playMP3('h')">H</button>
<button onclick="playMP3('i')">I</button>
<button onclick="playMP3('j')">J</button>
<button onclick="playMP3('k')">K</button>
<button onclick="playMP3('l')">L</button>
<button onclick="playMP3('m')">M</button>
<button onclick="playMP3('n')">N</button>
<button onclick="playMP3('o')">O</button>
<button onclick="playMP3('p')">P</button>
<button onclick="playMP3('q')">Q</button>
<button onclick="playMP3('r')">R</button>
<button onclick="playMP3('s')">S</button>
<button onclick="playMP3('t')">T</button>
<button onclick="playMP3('u')">U</button>
<button onclick="playMP3('v')">V</button>
<button onclick="playMP3('w')">W</button>
<button onclick="playMP3('x')">X</button>
<button onclick="playMP3('y')">Y</button>
<button onclick="playMP3('z')">Z</button>
</div>
<br>
<button id="examButton" onclick="showRandomLetter()">开始考试</button>
<p id="randomLetter"></p>
<audio id="mp3Player"></audio>
<script>
function playMP3(letter) {
var mp3Player = document.getElementById("mp3Player");
mp3Player.src = letter + ".mp3";
mp3Player.play();
}
<pre><code> function showRandomLetter() {
var letters = "abcdefghijklmnopqrstuvwxyz";
var randomIndex = Math.floor(Math.random() * letters.length);
var randomLetter = letters[randomIndex];
var randomLetterDisplay = document.getElementById("randomLetter");
randomLetterDisplay.innerHTML = randomLetter;
setTimeout(function(){
playMP3(randomLetter);
}, 2000);
}
</script>
</code></pre>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hvdv 著作权归作者所有。请勿转载和采集!