HTML 字母表 MP3 播放器 - 点击字母播放声音 | 在线练习
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>字母表 MP3 播放器 - 在线练习</title>
</head>
<body>
<h1>字母表 MP3 播放器</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/oX2P 著作权归作者所有。请勿转载和采集!