使用jQuery控制页面上的HTML5音频

Question

我在我的网站上构建了一个简单的游览,将使用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();

                });

            });

Answer 1

您正在使用jQuery的trigger()来触发未在发布的代码中定义的事件,因此很难真正说出'stop'是什么,但作为一般规则,HTML5 Audio没有stop()函数,仅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/