воспроизводить звуковой файл только тогда, когда div виден?

Question

воспроизводить звуковой файл только тогда, когда div виден?

0

Я использую jquery, чтобы исчезнуть в div после 3 секунд. то, что я пытаюсь сделать сейчас, задает оператор if, чтобы сказать, когда div "dashboard_right2" будет виден, а затем воспроизвести звуковой клип.

на данный момент я использую этот аудио-скрипт html5, который запускает звуковой файл, воспроизводимый при загрузке страницы, однако я хочу, чтобы звуковой файл воспроизводился, только если отображается div "dashbaord_right2". может кто-нибудь, пожалуйста, покажите мне, как это сделать, спасибо.

звуковой код:

<audio src="assets/music/sound_file.mp3" autoplay>
</audio>
<script>
var audio = document.createElement("audio");
if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg"))
{
audio.src = "audio/sample.mp3";
audio.play();
}
</script>
<audio src="data:audio/mpeg,ID3%02%00%00%00%00%..." autoplay>
</audio>

div, который исчезает через 3 секунды, используя jquery:

<script>
$('.dashboard_right2').hide(); // this or use css to hide the div
$('.dashboard_right2').delay(2000).fadeIn('slow');
</script>

user3080996 09 дек. 2013, в 20:36

Источник

1

Как насчет $('.dashboard_right2').delay(2000).faceIn('slow', function() { audio.play(); });
Cyclonecode 09 дек. 2013, в 18:58
0

Вы хотите, чтобы можно было постоянно скрывать / показывать dashboard_right2 или просто делать начальное исчезновение при загрузке страницы?
FrancesKR 09 дек. 2013, в 19:01
0

мне нужно только начальное исчезновение при загрузке страницы
user3080996 09 дек. 2013, в 19:02

Показать ещё 1 комментарий

Теги:

jquery

audio

html5

1 ответ

Ещё вопросы

Как насчет $('.dashboard_right2').delay(2000).faceIn('slow', function() { audio.play(); });
Вы хотите, чтобы можно было постоянно скрывать / показывать dashboard_right2 или просто делать начальное исчезновение при загрузке страницы?
мне нужно только начальное исчезновение при загрузке страницы

Cyclonecode · Answer 1 · 2013-12-09T16-56-00.000Z

Вы можете сделать так:

$('.dashboard_right2').delay(2000).fadeIn('slow', function() {
  // play your audio
  audio.play();
});

а также

$('.dashboard_right2').hide();
audio.pause();

Например:

<div id="toggleMusic">Toggle Music</div>

<audio id="audio" src="assets/music/sound_file.mp3" autoplay>

<script type="text/javascript">
$("#toggleMusic").click(function() {
   var audio = document.getElementsByTagName('audio')[0];

   if($(".dashboard_right2").is(":visible")) {
      // hide the dashboard and pause the music
      $('.dashboard_right2').hide();
      audio.pause();
   } else {
      // show the dashboard and start the music
      $('.dashboard_right2').delay(2000).fadeIn('slow', function() {
         audio.play();
      });
   }
});
</script>

Если вам нужна только fadeIn() для загрузки страницы, вам следует использовать метод toggle() чтобы скрыть/показать ваш элемент:

$('.dashboard_right2').toggle(0, function() {
   if($('.dashboard_right2').is(':visible')) {
      audio.play();
   } else {
      audio.pause();
   }
});

это, кажется, не работает, HTML заставляет аудио файл воспроизводиться тем не менее :(
Выше не проверено, но должно работать. Вы пытались установить autoplay на ложь? А что вы подразумеваете под "html заставляет проигрывать аудио файл"? Что не работает?
@ user3080996 - О, я только что заметил, что присвоил кнопке неправильный идентификатор - это должно быть toggleMusic не toggleButton
@ user3080996 - Кроме того, я заметил, что вы не можете выбрать audio элемент с помощью идентификатора, поэтому вам придется сделать что-то вроде: var audio = document.getElementsByTagName('audio')[0];
я также не хочу, чтобы это была функция щелчка, так как div исчезают при загрузке страницы, а не при нажатии. так что мне нужно изменить функцию переключения музыки на при загрузке?
@ user3080996 - Я не собираюсь писать ваш код для вас. Я показал вам кое-что, что работает, и вы можете изменить его в соответствии со своими потребностями. И трудно понять, как вы на самом деле хотите, чтобы это работало? Если вам нужна дополнительная помощь, вы должны обновить свой вопрос с дополнительной информацией =)