现有一随机点名站点，需要在点击“开始”按钮的同时播放音乐（此时按钮显示变为“停止”，点名开始），再次点击该按钮时音乐停止（此时按钮显示变为“开始”，点名停止）。同一监听执行两动作未找到解决方案。css部分已省略。
<body>
<h1 align="center" style="color:black ;font-size:46px ; font-weight:normal;font-family:华文行楷;">点 名 系 统</h1>
<center><span id="_span">刺激时刻 值得拥有</span>
<p></p>
<input type="button" id="btn" value="开始">
<div class="box" id="box"></div>
<script>
// id函数获取
function my$(id){
return document.getElementById(id)
};
// 点名抽取数据存档
var arr = ["1","2","3","4","5"
];
// 动态创建层
for(var i =0;i<arr.length;i++){
var div = document.createElement("div");
div.innerText=arr[i];
div.className="name";
my$("box").appendChild(div);
};
var _index;
// 点名
my$("btn").onclick=function(){
var peoples= arr.length;
// 监视按钮的状态
if(this.value==="开始"){
// 定时针
timeId=setInterval(function () {
// 清空所有层的颜色
for(var i =0;i<arr.length;i++){
my$("box").children[i].style.background=""
};
// 留下当前层的颜色
var random = parseInt(Math.random()*peoples);
my$("box").children[random].style.background="blue";
// _span 点名抽取的速度取决于这里
my$('_span').innerText = arr[random];
_index = random;
},65);
this.value="停止";
}else{
my$('_span').innerText = arr[_index];
// 清除计时器
clearInterval(timeId);
this.value="开始";
};
};
</script>
</body>
</html>
你需要实现在点击"开始"按钮时播放音乐，再次点击按钮时音乐停止，并且按钮的显示和点名的开始和停止状态相对应。以下是修改后的代码：
<!DOCTYPE html>
<html>
<head>
<title>点名系统</title>
<style>
body {
text-align: center;
}
h1 {
color: black;
font-size: 46px;
font-weight: normal;
font-family: 华文行楷;
}
.box {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.name {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightgray;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
</style>
</head>
<body>
<h1>点 名 系 统</h1>
<span id="_span">刺激时刻 值得拥有</span>
<p></p>
<input type="button" id="btn" value="开始">
<div class="box" id="box"></div>
<script>
function my$(id) {
return document.getElementById(id);
}
var arr = ["1", "2", "3", "4", "5"];
var timeId;
var audio = new Audio("音乐文件的URL"); // 将音乐文件的URL替换为实际的音乐文件地址
for (var i = 0; i < arr.length; i++) {
var div = document.createElement("div");
div.innerText = arr[i];
div.className = "name";
my$("box").appendChild(div);
}
var _index;
var isPlaying = false;
my$("btn").onclick = function () {
var peoples = arr.length;
if (!isPlaying) {
// 播放音乐
audio.play();
timeId = setInterval(function () {
for (var i = 0; i < arr.length; i++) {
my$("box").children[i].style.background = "";
}
var random = parseInt(Math.random() * peoples);
my$("box").children[random].style.background = "blue";
my$("_span").innerText = arr[random];
_index = random;
}, 65);
this.value = "停止";
isPlaying = true;
} else {
// 停止音乐
audio.pause();
audio.currentTime = 0;
clearInterval(timeId);
my$("_span").innerText = arr[_index];
this.value = "开始";
isPlaying = false;
}
};
</script>
</body>
</html>
在上面的代码中，你要将"音乐文件的URL"替换为实际的音乐文件地址。这段代码使用了Audio对象来播放音乐，通过play()方法播放音乐，通过pause()方法暂停音乐，通过currentTime属性将音乐重置到起始位置。
您可以在点击按钮时同时播放音乐，可以使用 HTML5 的音频标签
<audio id="myAudio">
<source src="music.mp3" type="audio/mpeg">
</audio>
其中，src 属性指定音乐文件的 URL，type 属性指定音乐文件的 MIME 类型。
然后，您可以在 JavaScript 中获取音频元素，并在按钮的点击事件中根据按钮的状态来控制音乐的播放和暂停，如下所示：
var audio = my$('myAudio');
my$("btn").onclick=function(){
var peoples= arr.length;
if(this.value==="开始"){
timeId=setInterval(function () {
// ...
},65);
this.value="停止";
audio.play();
}else{
// ...
this.value="开始";
audio.pause();
audio.currentTime = 0;
};
};
其中，play() 方法用于播放音乐，pause() 方法用于暂停音乐，currentTime 属性用于将音乐回放到开始位置。
完整代码如下所示：
<body>
<h1 align="center" style="color:black ;font-size:46px ; font-weight:normal;font-family:华文行楷;">点 名 系 统</h1>
<center><span id="_span">刺激时刻 值得拥有</span>
<p></p>
<input type="button" id="btn" value="开始">
<div class="box" id="box"></div>
<audio id="myAudio">
<source src="music.mp3" type="audio/mpeg">
</audio>
<script>
function my$(id){ return document.getElementById(id) };
var arr = ["1","2","3","4","5" ];
for(var i =0;i<arr.length;i++){
var div = document.createElement("div");
div.innerText=arr[i];
div.className="name";
my$("box").appendChild(div);
};
var audio = my$('myAudio');
var timeId;
var _index;
my$("btn").onclick=function(){
var peoples= arr.length;
if(this.value==="开始"){
timeId=setInterval(function () {
for(var i =0;i<arr.length;i++){
my$("box").children[i].style.background="";
};
var random = parseInt(Math.random()*peoples);
my$("box").children[random].style.background="blue";
my$('_span').innerText = arr[random];
_index = random;
},65);
this.value="停止";
audio.play();
}else{
my$('_span').innerText = arr[_index];
clearInterval(timeId);
this.value="开始";
audio.pause();
audio.currentTime = 0;
};
};
</script>
</body>