Можно ли в html 5 проиграть звук дважды подряд?

user3162553

Я пытаюсь создать игру Simon, в которой пользователь должен запоминать воспроизводимые звуки в правильной последовательности. Я подключил звук, и он правильно срабатывает при нажатии на элемент. Однако звук не будет воспроизводить один и тот же звук дважды подряд, если вы не щелкните дважды. Другими словами, я не могу заставить компьютер имитировать нажатие кнопки два раза подряд.

Это упрощенный вариант, за исключением моего файла js:

Попытка 1 (вызов функции дважды):

...
var redButton    = document.getElementById("red");
var audioRed     = document.getElementById("audio-red");

redButton.addEventListener("click", function() {
   createNewSeq();
});
...

var createNewSeq = function () {
  audioRed.play();
  audioRed.play();
};

audioRed сработает только один раз.

Попытка 2 (попытка принудительной перезагрузки с вызовом функции загрузки):

var createNewSeq = function () {
  audioRed.play();
  audioRed.load();
  audioRed.play();
};

Та же проблема - играет только один раз.

Попытка 3 (воссоздание элемента): еще одна попытка, о которой я подумал, - это буквально воссоздание и повторная загрузка аудиотэга при каждом запуске метода, но это кажется смешным и до смешного неэффективным.

Попытка 4 (создать задержку из типа setTimeout): опять же, я знаю, что это ужасно и неточно, но если проблема заключается во времени, возможно, это может помешать тому, чтобы одно и то же было вызвано в то же время, скрывая, был ли он вызван или нет.

Попытка 5 (изменение источника аудиоэлемента для принудительной перезагрузки): я думал, что если вы измените источник элемента, а не измените его обратно, это заставит его рассматривать это второе изменение в отличие от первого.

Действительно ли звук доступен новичку или вам нужно работать с потоками и буферами, чтобы он действительно работал?

Джаред Фарриш

Используйте события мультимедиа, чтобы инициировать endedсобытие . Если вы думаете об этом, вы пытаетесь играть, загружать, а затем играть все одновременно. Это как сказать: «Играй, загружай, играй!» не дожидаясь его завершения.

Обратите внимание: я не знаю, поддерживает ли браузер Media Events (демонстрация не работает в IE11 из-за ограничений доступа к источнику файла, но работает в Chrome и Firefox Latest).

Демо (воспроизводится дважды по кнопке click):

<audio id="audiotag1" src="https://upload.wikimedia.org/wikipedia/en/9/9f/Sample_of_%22Another_Day_in_Paradise%22.ogg" preload="auto"></audio>
<button type='button' id='test'>Play Sound</button>
<span id='played'>0</span>

var audiotag = document.getElementById('audiotag1'),
    test = document.getElementById('test'),
    played = document.getElementById('played'),
    times_played = 0,
    max_plays = 2;

test.addEventListener('click', function() {
    audiotag.play();

    times_played++;
    played.textContent = 'Play #: ' + times_played;
});

audiotag.addEventListener('ended', function(){
    console.log('run again', times_played);

    if (times_played >= max_plays) {
        times_played = 0;
        played.textContent = 'Play #: ' + times_played;

        return;
    }

    audiotag.currentTime = 0;
    audiotag.play();

    times_played++;
    played.textContent = 'Play #: ' + times_played;
});

http://jsfiddle.net/x7xybLus/3/

Эта статья взята из Интернета, укажите источник при перепечатке.

Если есть какие-либо нарушения, пожалуйста, свяжитесь с[email protected] Удалить.

Отредактировано в
0

я говорю два предложения

0обзор
Войти в системуУчаствуйте в комментариях

Статьи по теме

Использование HTML 5, чтобы изменить язык клавиатуры на мобильных устройствах

HTML 5 атрибут холста щелчок

Проверка имени с использованием шаблона html 5

HTML 5 видео или аудио плейлист

Как предотвратить страницу html 5 для предотвращения хранения кеша в браузере?

Как мне вертикально выровнять эти индикаторы выполнения Html 5?

html обрабатывается как текст в полнокалендарной версии 5

html 5 ввод для суммы денег

Проверить ввод HTML 5 без тега формы?

Значение элемента формы HTML 5

html 5 видео не будет воспроизводиться автоматически

Рисование статического фона на холсте HTML 5

Как создать эффект свечения с HTML 5

Почему нельзя добавить тег ссылки для расширенного HTML: 5?

Декодировать набор символов HTML 5

Обновить строку запроса (без перенаправления) без HTML 5

Какие символы нужно экранировать в HTML 5?

Текстовая таблица разрешенного контента и категорий контента для элементов HTML 5

Видео с использованием HTML 5 и сервлета

Заголовок диапазона тегов видео HTML 5

Желание отобразить возврат метода с использованием атрибута данных HTML 5

html 5 ввод даты: когда ввод даты щелкается мышью, он больше не указывает на то, что он имеет фокус

Что должна отправлять форма HTML 5, если значение не установлено

Нарисуйте прямоугольник поверх видео с тегом HTML 5

html 5 перетаскивание не работает на экране мобильного телефона

Как удалить фигуры на холсте HTML 5?

Мерцание изображения холста HTML 5

Как проверить форму перетаскивания html 5?

Как получить диапазон типов ввода HTML 5 со строковыми значениями

TOP список

  1. 1

    Распределение Рэлея Curve_fit на Python

  2. 2

    Резервное копирование / восстановление kafka и zookeeper

  3. 3

    Редактировать существующий файл Excel C # npoi

  4. 4

    Ipython использует% store magic для получения динамического имени

  5. 5

    Как получить список индексов всех значений NaN в массиве numpy?

  6. 6

    Почему бы не выдать ошибку ERROR в тесте Jasmine?

  7. 7

    Дженерики и потоки Java

  8. 8

    Как отфильтровать несколько столбцов в Qtableview?

  9. 9

    Как добавить Swagger в веб-API с поддержкой OData, работающий на ASP.NET Core 3.1

  10. 10

    Как изменить значок приложения для проекта libgdx android

  11. 11

    Thymeleaf не отображает значения в проекте Spring Boot

  12. 12

    Unity Проверить, включен ли Toggle

  13. 13

    Airflow не распознает мои настройки подключения S3

  14. 14

    Flutter: Unhandled Exception: FileSystemException: Creation failed, path = 'Directory: '' (OS Error: Read-only file system, errno = 30)

  15. 15

    Bogue étrange datetime.utcnow()

  16. 16

    На графике Matplotlib не отображается легенда

  17. 17

    Создание X509Certificate2 из ECC X509Certificate выдает исключение System.NotSupportedException в C #

  18. 18

    Как добавить фреймворк в файл в папке «Источники» Xcode Playground?

  19. 19

    Выполнение команд PowerShell в программе Java

  20. 20

    Статус HTTP 403 - ожидаемый токен CSRF не найден

  21. 21

    Инструмент для вставки данных, собранных в электронной таблице, в документ Word или PDF

популярныйтег

файл