Я работаю с приведенным ниже кодом, основываясь на ответе на мой предыдущий вопрос.Цель состоит в том, чтобы иметь возможность нажимать на три отдельных изображения jpg (отображаются горизонтально), чтобы воспроизводить / приостанавливать три mp3-файла при нажатии на соответствующее изображение (т.е. один mp3-файл на изображение).Код сопровождает это, но mp3 воспроизводят друг друга, когда новое изображение щелкают, но предыдущее изображение не нажимается, чтобы сделать паузу.
Я ищу способ остановить предыдущее воспроизведение звука при нажатии на новое изображение, таким образом воспроизводя новое аудио (не все пользователи будут приостанавливать воспроизведение звука, прежде чем щелкнуть следующее изображение / новое аудио).Поэтому мне было интересно, если кто-нибудь может указать мне в правильном направлении.Я, очевидно, не разбираюсь в HTML (хотя и изучаю), но я ученый, пытающийся выдвинуть простой веб-сайт с результатами исследований, включающий конкретные изображения и сопровождающее аудио.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
var audio1 = new Audio("1st MP3 url");
audio.onended = function () { }
audio.oncanplaythrough = function () { }
var playing = false;
function ControlAudio1() {
playing = !playing;
if (playing)
audio1.play()
else
audio1.pause()
}
</script>
<input type="Image" id="" style="height:250px;width:250px;" src="1st JPG url" onclick="ControlAudio1()">
<script>
var audio2 = new Audio("2nd MP3 url");
audio.oncanplaythrough = function () { }
audio.onended = function () { }
var playing = false;
function ControlAudio2() {
playing = !playing;
if (playing)
audio2.play()
else
audio2.pause()
audio2.currentTime = 0;
}
</script>
<script>
var audio3 = new Audio("3rd MP3 url");
audio.oncanplaythrough = function () { }
audio.onended = function () { }
var playing = false;
function ControlAudio3() {
playing = !playing;
if (playing)
``audio3.play()
else
audio3.pause()
}
</script>
<input type="Image" id="" style="height:250px;width:250px;" src="3rd JPG url" onclick="ControlAudio3()">
</body>
</html>