Как показать спиннер во время загрузки звука с использованием Jquery? - PullRequest
Новая
       1

Как показать спиннер во время загрузки звука с использованием Jquery?

0 голосов
/ 19 июля 2011

Я сделал простую кнопку воспроизведения / паузы, которая работает вместе с тегом 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 () {..} но я не смог понять.

Спасибо!

Ответы [ 3 ]

1 голос
/ 19 июля 2011

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

$(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 счетчика и пытается воспроизвести звук.

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

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

0 голосов
/ 19 июля 2011

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

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

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

style="display:none"

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

$("theidoftheimage").show();

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

$("theidoftheimage").hide();

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

0 голосов
/ 19 июля 2011

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

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

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

...