<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>小学英语听力</title>
<link rel="stylesheet" href="dist/style.css">
<link rel="stylesheet" href="dist/APlayer.min.css">
<script src="dist/APlayer.min.js"></script>
</head>
<body>
<div id="app">
<h1>小学英语</h1>
<h3>🍭 小学英语听力测验</h3>
<select id="jsonSelect">
<option value="">请选择音频列表</option>
<option value="Grade-3-English-Part1.json">Grade-3-English-Part1</option>
<option value="2024_Grade_3_5.json">2024_Grade_3_5</option>
<option value="202501.json">2025年1月3-6年级听力</option>
</select>
<div id="aplayer"></div>
</div>
<script>
// 监听下拉菜单的变化
document.getElementById('jsonSelect').addEventListener('change', function (event) {
const selectedValue = event.target.value; // 获取用户选择的选项
if (selectedValue) {
// 根据选择的 JSON 文件名加载相应的 JSON 数据
fetch(selectedValue)
.then(response => response.json())
.then(data => {
// 检查 JSON 数据的格式
if (data.audio && Array.isArray(data.audio)) {
// 初始化 APlayer 播放器
const ap = new APlayer({
container: document.getElementById('aplayer'),
theme: '#F57F17',
lrcType: 3,
audio: data.audio
});
} else {
console.error('JSON 文件格式不正确，缺少 audio 数组');
}
})
.catch(error => {
console.error('加载 JSON 文件失败:', error);
});
} else {
alert('请选择一个有效的音频数据');
}
});
</script>
</body>
</html>