Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Audio при OnClick (https://javascript.ru/forum/events/67388-audio-pri-onclick.html)

AlRy 15.02.2017 11:32

Audio при OnClick
 
Помогите, пожалуйста!

Достался "в наследство" такой код:

<script>
var prefix, main_Qq, main_type, Ql;
function createList() {
prefix = "al_";
var request = db.transaction(workingStore, "readwrite").objectStore(workingStore).index("NN") .openCursor();
request.onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
//console.log(cursor.key + " | " + cursor.value.ID);
var cID = cursor.value.ID;
$(".questions-list").append(
'<question data-Qq-Id="' + cID + '" class="mix" data-my-order="3">' +
'<div class="question-title">' + FirstlineQq[cID].Title + '</div>' +
'<div class="question-rate">' +
'<div class="question-like"></div>' +
'<input type="radio" data-Qq-Id="' + cID + '" name="' + prefix + 'q' + cID + '" id="' + prefix + 'q' + cID + 'a1" value="1"><label for="' + prefix + 'q' + cID + 'a1"></label>' +
'<input type="radio" data-Qq-Id="' + cID + '" name="' + prefix + 'q' + cID + '" id="' + prefix + 'q' + cID + 'a2" value="2"><label for="' + prefix + 'q' + cID + 'a2"></label>' +
'<input type="radio" data-Qq-Id="' + cID + '" name="' + prefix + 'q' + cID + '" id="' + prefix + 'q' + cID + 'a3" value="3"><label for="' + prefix + 'q' + cID + 'a3"></label>' +
'<div class="rate-lock display-none"></div>' +
'</div>' +
'</question>'
);
cursor.continue();
} else {
console.log("end");
init();
checkQQ();
}
};
}
</script>

Каким образом можно сделать, чтобы при каждом выборе radio (при клике на селектор) проигрывался звуковой сигнал?

Dilettante_Pro 15.02.2017 14:24

<input type="radio" name="qcID" id="qcID1" value="1">
<label for="qcID1">Первый</label>
<input type="radio" name="qcID" id="qcID2" value="2">
<label for="qcID2">Второй</label>
<input type="radio" name="qcID" id="qcID3" value="3">
<label for="qcID3">Третий</label>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script>
$("input:radio").on("change", function() {
    beep();          
});
var beep = (function () {
   var snd = new Audio("http://download-sounds.ru/wp-content/uploads/2012/05/004.mp3"); 
   snd.play();
});
</script>

AlRy 15.02.2017 16:39

:( При подключении jquery-latest.js перестают работать некоторые другие функции.
Подключены jquery.min.js и jquery.mixitup.js

Dilettante_Pro 15.02.2017 17:36

AlRy,
jquery-latest.js просто в примере. Уберите ее, оставьте то, что у вас есть

AlRy 17.02.2017 13:03

Увы, без этой библиотеки не работает (хотя - очень странно).
C ней же работает крайне некорректно (конфликтует с другими библиотеками).

Dilettante_Pro 17.02.2017 13:29

AlRy,
Должна быть одна библиотека jQuery
Она должна грузиться первой.
Потом - дополнительные библиотеки, потом - скрипты.

AlRy 20.02.2017 16:06

Вот просто с jQuery данный скрипт у меня не работает.

Dilettante_Pro 21.02.2017 10:26

AlRy,
Цитата:

Сообщение от AlRy
Вот просто с jQuery данный скрипт у меня не работает.

Что значит - не работает? Есть какие-то сообщения в консоли?
Где он размещается?
Возможно, нужно обернуть его в
$(function () {
      .......  

    });

AlRy 21.02.2017 12:20

вставил
<script>
(function () {
$("input:radio").on("change", function() {
beep();
});
var beep = (function () {
var snd = new Audio("путь_к_звуку/click.mp3");
snd.play();
});

});
</script>

ничего не происходит.
Если подключаю еще и jquery-latest.js - звук есть. Но не всегда.
Там список из 40 пунктов с тремя вариантами ответа каждый. Иногда звук срабатывает на первых двух пунктах. Иногда получается до 20 догнать. На всех 40 - никогда. Ну и без jquery-latest.js нет звука вовсе. Зато с ним - пропадает другой звук (в другой функции) :)

Dilettante_Pro 21.02.2017 12:25

AlRy,
Без полной картины компоновки страницы тут трудно что-нибудь сказать.


Часовой пояс GMT +3, время: 10:27.