无法在 JS 中播放声音

Question

这是新代码。还是没有声音。

这个在外部js文件中 功能播放声音（颜色）{ var mySound = new buzz.sound("/sounds/"+color, { 格式：[“ogg”、“mp3”、“acc”] });

                    mySound.play()

这在头脑中：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>

<script type="text/javascript" src="/sounds/buzz.js">
</script>

<script type="text/javascript" src="sound.js">
</script>

<script type="text/javascript" src="hoverBubbles.js">
</script>

我已经对我的网站进行了编程，以便在用户单击图像时播放声音。我用 JS 做到了这一点。但有一个问题。在您单击图像之后，声音播放前有大约 5 秒的长时间延迟。我该怎么做才能使声音播放不延迟？另外，当我试图解决上述问题时，我做了一些事情（我不知道它是什么），我现在根本无法播放声音。

有什么想法吗？

function playSound(color) {
    $("#wavLoader").html("<embed src='/sounds/" + color + ".wav' hidden=true starttime='00:00' autostart=true loop=false>");
    }); 

}

<title>Colors</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</script>

<script type="text/javascript" src="hoverBubbles.js"></script>

<script type="text/javascript" src="sound.js"></script>

<link rel="stylesheet" type="text/css" href="heading.css">

<link rel="stylesheet" type="text/css" href="fish.css">

<link rel="stylesheet" type="text/css" href="fishText.css">

<link rel="stylesheet" type="text/css" href="fishBubbles.css">

<style type='text/css'>


</style>

$(document).ready(function() {

            $('#fishBlack').mouseover(function() {
                $('#bubblesBlack').toggle('slow');
                $('#textBlack').toggle('slow');
            });

            $('#fishBlack').mouseout(function() {
                $('#bubblesBlack').hide('slow');
                $('#textBlack').toggle('slow');
            });
}

$(document).ready(function() {

            $('#fishBlack').click(function() {
                    playSound('black');
            });

}       
<!--the sound-->    

<span id="wavLoader" style="position:fixed; top:-100px;"></span>

Answer 1

我建议使用现有的库，如 Buzz， 用它自己的话来说：

Buzz 是一个小巧但功能强大的 Javascript 库，可让您 轻松利用新的 HTML5 音频元素。它会退化 在非现代浏览器上优雅地运行。

API 示例：

var mySound = new buzz.sound( "/sounds/myfile", {
    formats: [ "ogg", "mp3", "acc" ]
});

mySound.play()
    .fadeIn()
    .loop()
    .bind( "timeupdate", function() {
       var timer = buzz.toTimer( this.getTime() );
       document.getElementById( "timer" ).innerHTML = timer;
    });

工作示例：jsFiddle

Answer 2

您的脚本正在返回一个嵌入标签，该标签反过来调用安装在用户系统上的该类型媒体的默认播放器（可能是某种形式的 Windows Media Player、QuickTime 等）。加载播放器需要一些时间，具体取决于客户端计算机的速度以及（可能）页面上已经打开的播放器数量。

您可能希望实现某种形式的预缓冲或使用像 Peter 提到的那样的第三方库。 Or this one，在浏览器不支持 HTML5 时提供 Flash 后备。

使用像 jQuery 这样的 JavaScript 框架，还有一些现成的插件，例如jPlayer。