Подождите, пока звук не закончится, чтобы использовать страницу

Question

Подождите, пока звук не закончится, чтобы использовать страницу

0

Мне нужно воспроизвести звук с помощью Javascript/JQuery. В настоящее время я использую этот код для воспроизведения звука:

var snd = new Audio('dir/file.wav');
snd.play();

Мне нужно, чтобы страница была непригодной до тех пор, пока звук не закончится. Возможно, с каким-то диалогом во время воспроизведения звука. Когда звук заканчивается, модальный дисплей кнопки "ОК", и после нажатия кнопки вы можете продолжить использовать страницу.

Vito 26 сен. 2013, в 05:47

Источник

Теги:

javascript

jquery

audio

3 ответа

0

Существует очень простое/короткое решение

Используйте следующий код syntax-

Audio_object=document.getElementById('audio_tag_id');
if(Audio_object.currentTime==Audio_object.duration)
alert('completely played.');

audio_tag_id - это идентификатор <audio> -element.

Rajesh Paul 26 сен. 2013, в 12:21

0

Спасибо за ответы. К сожалению, я проверил, но это не сработало.
Vito 26 сен. 2013, в 20:49
0

На самом деле этот работает только в ХРОМЕ.
Rajesh Paul 27 сен. 2013, в 05:11

0

Я подумал о следующем подходе: Инициировать таймер и ждать, пока звук не закончится.

Show dialog/dimmed overlay layer
setInterval()
    -> Compare snd->currentTime with snd.duration. If they are the same
        -> Clear interval
        -> Hide dialog/Show OK button

Или

Show dialog/dimmed overlay layer
setInterval()
    -> Is snd.ended ?
        -> Clear interval
        -> Hide dialog/Show OK button

RyanB 26 сен. 2013, в 02:17

Ещё вопросы

Спасибо за ответы. К сожалению, я проверил, но это не сработало.
На самом деле этот работает только в ХРОМЕ.

Marcky · Accepted Answer · 2013-09-26T02-47-00.000Z

ПРИМЕЧАНИЕ. Это не crossbrowser (только для браузеров, совместимых с HTML5)!

Для совместимости с кросс-браузером вам может понадобиться посмотреть на эту ссылку: какой трюк даст самый надежный/совместимый звуковой сигнал в окне браузера для большинства браузеров

Я серьезно не умею объяснять вещи, но я сделал JsFiddle для вас.

http://jsfiddle.net/tnnjB/8/

Или вот код:

HTML:

<audio id="myaudio" onended="onAudioEnded();">
  <source src="http://www.dccl.org/Sounds/pchick-alarm.wav" type="audio/wav">
Your browser does not support the audio element.
</audio>

<input 
    type="button" 
    value="You cannot click me before the sound is over" 
    onclick="javascript:alert('congrats!')"
/>

JAVASCRIPT:

$(function(){
    var audio = document.getElementById("myaudio");
    $.blockUI({message : "Listen to the music!" });  
    audio.play();
});

function onAudioEnded(){ 
    $.unblockUI();
    alert("It over!!");
};

Вещи, которые я использовал: jquery, jquery-ui, jquery BlockUI plugin, HTML5 аудио-тег, google.

Кроме того, этот пример не будет работать в IE, поскольку IE не принимает источник звука на удаленном хосте, но он будет работать, если файл локальный на вашем сервере.

Надеюсь, это поможет вам в достижении ваших потребностей,

Марк

Кажется, это круто, но HTML-код зависает после воспроизведения звука, и вы ничего не можете сделать. Что-то нужно исправить, чтобы это заработало?
Я проверял это на FF, какой браузер вы использовали, чтобы проверить это?
Только что протестировал его на Firefox, он работал отлично (большое спасибо), но не работает на Chrome и IE10. Любая подсказка о том, что может быть не так?
Я только что обновил свой ответ, так что теперь все должно работать на Chrome, FireFox, IE (см. Мое примечание к ответу) и на всех HTML5-совместимых браузерах.
Большое спасибо за вашу помощь, она работает сейчас. Это именно то, что мне было нужно.
Просто отметим, что элемент <audio> в первую очередь работает только в HTML5, поэтому я не думаю, что вам нужно говорить, что он работает только в браузерах HTML5.