jquery - 使用 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 只会将音频倒回到开头，并不会真正停止它。

这是一个 fiddle ，展示了一种实现方法。它使用 mp3 文件，因此您的浏览器必须支持该格式:http://jsfiddle.net/adeneo/n6Bar/1/