Как я могу приостановить или остановить звук в этом рабочем скрипте?

Это рабочий скрипт для запуска воспроизведения нужного аудио. Может ли кто-нибудь сказать хорошее решение для паузы или остановки звука, снова щелкнув абзац onclick?

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=script, initial-scale=sript">
<title>English Homonyms</title>
<link rel="stylesheet" href="css/style.css">
    
<script type="text/javascript">

function play(param) {

const playlist = [
"0 => nincs",
"audio/audio_01.mp3",
"audio/audio_02.mp3",
"audio/audio_03.mp3"
];

var list = param;
var music = playlist[param];

var audio = new Audio(music);
audio.play();
}

</script>

</head>
<body>

<h1>ENGLISH PRONUNCIATON NONSENSES – HOMONYMS</h1>

<p onclick = "play(1)">1. The bandage was wound around the wound.</p>
<p onclick = "play(2)">2. The farm was used to produce produce.</p>
<p onclick = "play(3)">3. The dump was so full that it had to refuse more refuse.</p>

</body>
</html>

Это довольно широко; есть много способов сделать это, но Как создать кнопку для нажатия и воспроизведения/остановки звука? может помочь (используйте абзацы вместо изображений). Вероятно, вы захотите инициализировать свой массив вне функции, отслеживать текущий воспроизводимый индекс, а затем переключать allAudio[currentTrack].pause()/.play() в прослушивателях на основе логического значения .paused.

— 09.04.2022 22:55

учитывая, что вы уже использовали элемент Audio, почему вы не вставляете звук должным образом? что-то вроде <audio controls src="audio/audio_01.mp3"> для замены p onclick. браузер позаботится о кнопках воспроизведения и паузы за вас.

— 09.04.2022 22:56

Bagus Tesa, я знаю, что вы правы, но у меня была цель найти решение без использования встроенного аудиоплеера. Я делал это раньше, но мне это не нравилось, поэтому я искал более простое решение. Хорошего дня.

— 10.04.2022 00:28

javascript

09.04.2022 22:46

Формы c голосовым вводом в React с помощью Speechly

Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...

В чем разница между Promise и Observable?

Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.

Сравнение структур данных: Массивы и объекты в Javascript

Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...

Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели

Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...

Приложение для отслеживания бюджета на React js для начинающих

Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...

Стоит ли использовать React в 2022 году?

В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

let nowPlaying = 0
let nowAudio = new Audio()

function play(param) {
    const playlist = [
        "0 => nincs",
        "audio/audio_01.mp3",
        "audio/audio_02.mp3",
        "audio/audio_03.mp3",
    ];

    var lista = param;
    var zene = playlist[param];

    if (nowPlaying === param) {
        if (nowAudio.paused) {
            nowAudio.play()
        } else {
            nowAudio.pause()
        }
    } else {
        nowAudio = new Audio(zene);
        nowAudio.play();

        nowPlaying = param
    }
}

Пожалуйста, объясните OP как, что ваш код решает его проблему.

— 09.04.2022 23:02

09.04.2022 23:00