我需要播放相关音频并突出显示相关文本，当用户再次单击播放按钮时，它应该暂停，然后从同一点播放
我有这个使用音频功能的脚本，但我不知道如何修改它以便它可以具有暂停和播放功能
http://jsbin.com/juwoyidome/edit?html,output
<html><head>
<style>
#myAudio {
display: none;
}
span {
margin: 0px 10px;
}
.playing {
background: yellow;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="myAudio">
<source src="" type="audio/mpeg">
</audio>
<button>Play Audio</button>
<p>
<span>Rooster</span>
<span>Cat</span>
<span>Horse</span>
<span>Elephant</span>
<span>Vulture</span>
<span>Duck</span>
</p>
<script type="text/javascript">
var audioIndex = 0;
var audioAddress = [
"http://audiomicro-dev.s3.amazonaws.com/preview/1030/caca5b5fcde48f9",
"http://audiomicro-dev.s3.amazonaws.com/preview/1030/9cd6976b1ce3b76",
"http://audiomicro-dev.s3.amazonaws.com/preview/1030/5d4ab0a4db5e7b4",
"http://audiomicro-dev.s3.amazonaws.com/preview/1030/0f5e54eda37e7f0",
"http://audiomicro-dev.s3.amazonaws.com/preview/1030/4597608ea80a312",
"http://audiomicro-dev.s3.amazonaws.com/preview/1030/6c4ae634173cc83"
];
$("button").click(function(){
audioIndex = 0;
playAudio(0);
});
$("#myAudio")[0].onended = function() {
audioIndex += 1;
playAudio(audioIndex);
};
function playAudio(index)
{
$("p > span").removeClass("playing");
$("#myAudio")[0].src = audioAddress[index];
$("#myAudio")[0].play();
$("p > span:nth-child(" + (index + 1) + ")").addClass("playing");
}
</script>
</body></html>
最佳答案
var audioIndex = 0;
var audioAddress = [
"http://audiomicro-dev.s3.amazonaws.com/preview/1030/caca5b5fcde48f9",
"http://audiomicro-dev.s3.amazonaws.com/preview/1030/9cd6976b1ce3b76",
"http://audiomicro-dev.s3.amazonaws.com/preview/1030/5d4ab0a4db5e7b4",
"http://audiomicro-dev.s3.amazonaws.com/preview/1030/0f5e54eda37e7f0",
"http://audiomicro-dev.s3.amazonaws.com/preview/1030/4597608ea80a312",
"http://audiomicro-dev.s3.amazonaws.com/preview/1030/6c4ae634173cc83"
];
var playing = false;
$(function() {
$aud = $("#myAudio")[0];
$btn = $("button");
function setAudio(index) {
$("p > span").removeClass("playing");
$aud.src = audioAddress[index];
}
setAudio(audioIndex);
$btn.click(function() {
if (playing) {
playing = false;
$aud.pause();
} else
$aud.play();
});
$aud.onended = function() {
if (audioIndex < audioAddress.length - 1) {
audioIndex++;
setAudio(audioIndex);
$aud.play();
} else {
audioIndex = 0;
setAudio(audioIndex);
playing = false;
$btn.text("Play Audio");
}
};
$aud.onpause = function() {
if (!playing) $btn.text("Play Audio");
};
$aud.onplay = function() {
$btn.text("Pause Audio");
playing = true;
$("p > span:nth-child(" + (audioIndex + 1) + ")").addClass("playing");
};
});#myAudio {
display: none;
}
span {
margin: 0px 10px;
}
.playing {
background: yellow;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<audio id="myAudio">
<source src="" type="audio/mpeg">
</audio>
<button>Play Audio</button>
<p>
<span>Rooster</span>
<span>Cat</span>
<span>Horse</span>
<span>Elephant</span>
<span>Vulture</span>
<span>Duck</span>
</p>关于javascript - 播放音频并突出显示带暂停选项的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37696445/