Question

根据反馈进行快速编辑：这个问题的一个主要部分是我缺乏经验。如果你能给我一些关于如何调查/调试的提示，我真的很感激。再次感谢。尼尔

我有这个函数/插件，用于在单击元素时播放声音：

(function($){
    $.fn.attachSound = function (soundSrc)
    {
    return this.each(function(index){
        var audioElement = document.createElement('audio');
        if (audioElement.canPlayType('audio/mpeg') == '')
        {
        soundSrc = soundSrc.replace('.mp3','.ogg');
        }
        audioElement.setAttribute('src', soundSrc);
        $(this).click(function() {
        audioElement.play();
        });
    })
    }
})( jQuery );

以下是我如何称呼它的一个例子：

$(document).ready(function(){
    $('#laughter-button').attachSound('sounds/laughter-elf.mp3');
    $('#laughter-button2').attachSound('sounds/laughter-santa.mp3');
})

到目前为止，它在Chrome，FF，Opera和Safari（所有当前版本，我还没有在IE上进行测试）中工作。我遇到的问题是在Safari中，它仅适用于第一次用户点击。我想要使用此功能的方法之一是作为基于声音的记忆游戏的一部分，因为它不会这样做。有什么想法吗？

我对编程缺乏经验，而且我从未尝试过闪回技术但是我愿意研究它是如何工作的。也许，有更好的方法，或者你可以指出我正确的方向？

谢谢你，尼尔

Answer 1

检查Safari是否支持http://html5test.com/

上的mp3音频/ Html5

Answer 2

我找到了妥协的解决方案。此解决方案在每次单击时创建新音频，而不是仅在document.ready上创建。缺点是它的效率较低，但至少它在Safari中工作。我有办法改进它。现在，虽然我对这个解决方案感到满意，仅仅因为它有效。尽管如此，如果你能想到一个，我肯定愿意接受更好的解决方案。我可能最终会尝试将此代码与浏览器嗅探或其他内容结合起来。感谢所有让我以不同方式思考问题的人。尼尔

(function($){
    $.fn.attachSound = function (soundSrc)
    {
    return this.each(function(index){
        $(this).click(function() {
        var audioElement = document.createElement('audio');
            if (audioElement.canPlayType('audio/mpeg') == '')
            {
            soundSrc = soundSrc.replace('.mp3','.ogg');
            }
        audioElement.setAttribute('src', soundSrc);
        audioElement.play();
        });
    })
    }
})( jQuery );

HTML5音频Safari困境

2 个答案: