Использование jQuery для управления аудио HTML5 на странице - PullRequest
Новая
       0

Использование jQuery для управления аудио HTML5 на странице

2 голосов
/ 10 декабря 2011

Я построил простой тур на своем сайте, который будет кодироваться с использованием HTML5-анимации.Он будет использовать звук из звукового тега HTML5, и тур будет загружен с использованием jquery.

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

У меня есть части этой работы, но я не могу правильно включить и выключить музыку, а затем остановить ее полностью, если они закрывают тур,Кто-нибудь может помочь? 

var sound;

            $(document).ready(function ()
            {   
                sound = $('#soundTour');

                $('.sound a').click(function()
                {
                    $(this).parents('div').toggleClass('mute');

                    if (sound.paused)
                    {
                        sound.play();
                    }
                    else
                    {
                        sound.pause();
                    }
                });

                $('.showTour').click(function()
                {
                    $('body').addClass('theatre'); $('#tour').fadeIn('slow', function() {  });

                    sound.trigger('play');
                });

                $('#tour').find('.tourClose').click(function()
                {
                    $('body').removeClass('theatre'); $('#tour').fadeOut('slow', function() {  });

                    sound.currentTime=0;
                    sound.pause();

                });

            });

1 Ответ

5 голосов
/ 10 декабря 2011

Вы используете триггер jQuery () для запуска событий, которые не определены в опубликованном коде, поэтому трудно действительно сказать, что такое «стоп», но, как правило, в HTML5 Audio нет остановки () function, только play () и pause (), чтобы сбросить звук, просто снова определите источник или установите .currenttime на ноль, например так: 

var audioElm = document.getElementById('soundTour');
    audioElm.src = 'myaudio.mp3';
    audioElm.load();

или 

var audioElm = document.getElementById('soundTour');
    audioElm.currentTime=0;
    audioElm.pause();

Установка currentTime только перематывает звук в начало и не останавливает его.

Вот скрипка, чтобы показать один из способов сделать это. Он использует файл mp3, поэтому ваш браузер должен поддерживать этот формат: http://jsfiddle.net/adeneo/n6Bar/1/

...