Как «привязать» звук к событию JavaScript?

Question

[kruglov_de]

Имеется тест проверки профессиональных знаний. По каждому вопросу есть ответа есть предполагаемые варианты ответов, против каждого из которых есть элемент radio. При кликании radio появляются надписи "Правильно" или "Неправильно". Хочу, чтобы при правильном ответе звучали аплодисменты, а при неправильном - например, звуке взрыва. Файл теста с расширением HTML и тест открывается в браузере. Выяснилось, что разные браузеры поддерживают разные форматы звуковых файлов, а нужен универсальный подход. Нашел возможное решение в виде плагина ionden.com/a/plugins/ion.sound/, но так как я - чайник, то проблема в корректном подключении плагина в код моего теста. Могу прислать код оригинального теста и его вариант после моего вмешательства

Comments

[citizen55]

<audio controls>
  <source src="filename.ogg" type="audio/ogg">
  <source src="filename.mp3" type="audio/mpeg">
</audio>

[kruglov_de]

Спасибо за ответ! Но так как я чайник, то....
1. Я это должен в ставить скрипт теста?
2. Этого будет достаточно, чтобы прозвучал звук при клике radio?

[Stalker_RED]

kruglov_de, нет, нет.
Это ответ на "разные типы".
Хотя было бы любопытно увидеть браузер, не умеющий mp3

[kruglov_de]

IE11, например. Хотя в настройках все, что надо - включено. На Edge MP3 играет. Но главное - как подключить звук к событию

[citizen55]

без jquery
https://codepen.io/citizen55/pen/oaeKRE?editors=1011

[kruglov_de]

Спасибо за ответ! Уже тепло!
Но! Привожу часть скрипта касательно названной проблемы - так в оригинале теста
// Функция, выполняющаяся по событию onclick элемента типа radio. Параметры: group_id - идентификатор группы, item_id - идентификатор элемента.
function rad(group_id, item_id) {
if (rad_аnswers[group_id][item_id] == 1)
{
m = "Правильно!";
true_count = true_count + 1;
}
else
{
m = "Неправильно!";
false_count = false_count + 1;
}
document.getElementById("rad_msg" + group_id).innerHTML = "" + m + "
" + rad_mes[group_id] + "
";
document.getElementById("true_cnt").innerHTML = true_count;
document.getElementById("false_cnt").innerHTML = false_count;
for (var i = 0; i < rad_аnswers[group_id].length; i++) {
document.getElementById("r" + group_id + "_" + i).disabled = "1"
}
if (true_count == rad_аnswers.length + chk_аnswers.length)
{
document.getElementById("cert").style.display = "";
}
}

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

[citizen55]

трудно сказать по этому куску кода с минималистическими переменными , но возможно как то так

где то в коде

var audio = document.getElementById("audio");
var audio1 = document.getElementById("audio1");

ваш код

if (rad_аnswers[group_id][item_id] == 1)
{
       m = "Правильно!";
       true_count = true_count + 1;
       if (audio1.duration > 0 && !audio1.paused) {
          audio1.pause();
          audio1.currentTime = 0;
        }
        audio.play();
}
else
{
      m = "Неправильно!";
      false_count = false_count + 1;
      if (audio.duration > 0 && !audio.paused) {
          audio.pause();
          audio.currentTime = 0;
        }
        audio1.play();
}

[kruglov_de]

И надо, наверное, еще указать путь к звукам через src?

[kruglov_de]

citizen55, И надо, наверное, еще указать путь к звукам через src?

[citizen55]

kruglov_de, Это ошибочный комментарий, или вы не разобрались еще с этой темой.
Если так:
Да само собой, куда же без источников. Разместите в html элементы и источники. В коде на Pen у меня пропущен один источник, не хотелось искать.

[kruglov_de]

citizen55, Спасибо за ответ. Действительно, ещё не разобрался до конца, но пришлось прерваться...
Если все-таки у меня не получится, я смогу ещё к Вам обратиться, или это уже слишком? Спасибо!

[citizen55]

kruglov_de, я в вас верю, но обращайтесь если что, в пределах своих знаний подскажу. Кстати в ответах написано элегантное решение

[kruglov_de]

citizen55,
Уважаемый коллега, добрый вечер!
К сожалению, проблема остается, моей квалификации (если ее можно так назвать) не хватает. Я вставил в начало скрипта
var audio = document.getElementById("audio");
var audio1 = document.getElementById("audio1");
Добавил также в скрипт функции, которые Вы указали. Указал src-пути (возможно некорректно).
В итоге звуков нет, но и тест не работает в части radio-объектов (мы коснулись только их и не трогали объекты chk). К сожалению, скрипт писал не я, но наш специалист, который его писал, сейчас на больничном и мне неловко его озадачивать, поэтому обращаюсь к Вам.
Не могу привести весь код - более 10000 знаков. Приведу тот кусок, который мы рассматривали
Начало скрипта:

[citizen55]

Почему то оповещения не было. Написано начало скрипта, а где он сам?

[kruglov_de]

citizen55,
Коллега, добрый вечер!
Спешу сообщить, что вопрос решился! С помощью Ваших рекомендаций и нашего специалиста, который вышел с больничного. Тест работает и звуки есть. Если Вам это интересно, могу сбросить данный тест (лучше на мыло, а то он более 10000 знаков и Тостер не пропускает).
В любом случае большое Вам спасибо!

[citizen55]

Нет спасибо, скидывать тест это лишнее. Удачи вам.

Answer 1

[Stalker_RED]