Как показать счетчик во время загрузки звука с помощью Jquery?

Я сделал простую кнопку воспроизведения/паузы, которая работает в сочетании с тегом audio html5 и jquery:

$(document).ready(function() {
   $("#stop-bt").hide();

 $("#play-bt").click(function() {
   $("#play-bt").hide();
   $("#audio-player")[0].play();
   $("#stop-bt").show();
 });

 $("#stop-bt").click(function() {
    $("#stop-bt").hide();
    $("#audio-player")[0].pause();
    $("#audio-player")[0].currentTime = 0;
    $("#play-bt").show();
 });
});

Я хочу добавить счетчик, чтобы указать, что поток загружается. Как мне показать div, содержащий мой счетчик (#spin), когда поток загружается, и скрыть его, когда поток начнет воспроизводиться?

Я думал, что могу быть на правильном пути, используя что-то вроде: .bind('progress', function() {..}, но я не мог этого понять.

Спасибо!


jquery html5-audio
person Phil    schedule 18.07.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Спасибо за ответы. Я уверен, что есть много способов решить эту проблему. Вот что в итоге сработало для меня:

$(document).ready(function() {
 $("#stop-bt").hide();
 $("#spin").hide();

 $("#play-bt").click(function() {
   $("#play-bt").hide();
   $("#spin").show();
   $("#audio-player")[0].play();
  });

 $("#audio-player").bind('playing', function() {
   $("#spin").hide();
   $("#stop-bt").show();
 });


 $("#stop-bt").click(function() {
  $("#stop-bt").hide();
  $("#play-bt").show();
  $("#audio-player")[0].pause();
  $("#audio-player")[0].currentTime = 0;
 });

});

Это довольно простое решение и может быть элементарным для некоторых, но в надежде помочь кому-то еще я хочу объяснить его. Этот ответ предполагает, что у вас есть соответствующие html-разделы где-то на странице.

По сути, это работает так: сначала нужно скрыть div, содержащий кнопку остановки, и div, содержащий счетчик. Затем, если щелкнуть div, содержащий кнопку воспроизведения, он скроет кнопку воспроизведения, отобразит div spinner и попытается воспроизвести звук.

Существует событие в сочетании с тегом html audio под названием «воспроизведение» (среди прочего), который показывает, когда начинается воспроизведение звука. Когда начинается событие воспроизведения, оно скрывает div, содержащий счетчик, и показывает div, содержащий кнопку остановки.

Наконец, если нажата кнопка остановки, контейнер div остановки скрывается, отображается контейнер div кнопки воспроизведения и приостанавливается воспроизведение звука.

person Phil    schedule 19.07.2011
comment
В основном используется событие playing. Спасибо! - person Fred K; 17.11.2016

arrow_upward
0
arrow_downward

В jQuery нет встроенного события progress. Вы должны инициировать это событие самостоятельно. Вы на правильном пути, вам просто нужно вызвать событие progress при загрузке вашего потока.

И не забудьте также определить пользовательское событие streamLoaded (вы можете назвать его как угодно) для загрузки потока.

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

person pixelfreak    schedule 18.07.2011

arrow_upward
-1
arrow_downward

Я не знаю, ищете ли вы это изображение, но у меня есть ссылка с очень хорошими счетчиками, и это бесплатно введите описание ссылки здесь

это страница.

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

style="display:none"

а затем я поставил в том месте, где я хотел, чтобы это было видно, я поставил

$("theidoftheimage").show();

и когда я хотел, чтобы это было скрыто, я поставил:

$("theidoftheimage").hide();

вот как я это сделал, надеюсь, это полезно

person apz2000    schedule 18.07.2011