javascript - 困惑于如何在蛇游戏中实现Javascript音频？

Question

我有一个通过Javascript制作的蛇类游戏，但是对于如何添加音频我还是有点不确定。我有Sam在24小时内教自己的Java脚本，浏览了stackoverflow问题和youtube教程，但我的困惑源于我的index.html中没有音频标签的事实。实际上，我不确定是否需要一个。这是我的单个index.html文件的内容:

<canvas id="canvas" width='450' height='450'></canvas>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/snake.js"></script>

我只有一个JavaScript文件和一个 Canvas 。以下是带有蛇功能的.js文件的摘要。我只包括我苦苦挣扎的音频部分。

$(document).ready(function () {
    var canvas = $('#canvas')[0];
    var ctx = canvas.getContext("2d");
    var w = $('#canvas').width();
    var h = $('#canvas').height();

    var cw = 10;
    var d;
    var food;
    var score;
    var eating_sound = "Eating-SoundBible.com-1470347575.mp3";

    var snake_array;

    function init() {
        d = "right";
        create_snake();
        create_food();
        score = 0;
        if (typeof game_loop != "undefined") 
            clearInterval(game_loop);
        game_loop = setInterval(paint, 60);
    }

    init();

这是我尝试调用mp3文件的地方。当蛇吃块时:

 if(nx == food.x && ny == food.y)
  {
    var tail = {x: nx, y: ny};
    create_food();
    score++;
    eating_sound.play();
  }

这对我来说并不对，这显然不是因为它不起作用。但是，我是否需要在.html中使用自动播放功能创建标签？这是正确的方法吗？我认为我不需要创建音频标签，因为我的index.html中没有任何html元素。在我看来，它应该随Javascript文件一起加载。对？

修订------------

感谢您在下面的回答和评论，但是对于音频的工作方式，我还是有些困惑。这取自以下Derek提供的Mozilla开发人员网络文档。

mySound = new Audio([URLString]);

我下载的音频文件不是URL字符串。我是否需要将其托管在某个地方，就像您将图片托管在tinypic.com上然后链接到该图片一样？

我修改了代码，将进食声音设置为变量:

var eating_sound = new Audio(["Eating-SoundBible.com-1470347575.mp3"]);

就像文档所说的一样，当然它不是URL。之后，我尝试这样称呼它:

if(nx == food.x && ny == food.y)
{
  var tail = {x: nx, y: ny};
  create_food();
  score++;
  new Audio(eating_sound).play();
}

现在应该在我的html中创建一个音频标签吗？我考虑了一下，似乎UrlString看起来像它的一种方法，也显示在文档中。我尝试了UrlString(Eating-SoundBible.com .... etc。)，但是那也不起作用。我靠近了吗？我现在的大问题是，我是否需要在index.html文件中添加某些内容，还是Audio构造函数为我做些呢？我只是想让它工作。

Answer 1

eating_sound是一个字符串。在JavaScript中，不能有直接引用文件的变量。要播放声音，您必须使用<audio>标记才能播放mp3文件。

创建<audio>节点(技术名称:HTMLAudioElement)的快速方法是使用the Audio constructor:

new Audio(eating_sound).play();

顺便说一句，您的陈述“在我看来，它应该随Javascript文件一起加载”是不正确的。每个文件都必须加载到DOM中才能进行操作。例如，如果需要在JavaScript中加载和处理图像，则必须通过 <img>构造函数创建 Image标记来加载图像。没有其他方法可以这样做。)