Question

我有一个蛇游戏，我正在通过Javascript制作，但我有点不确定如何添加音频。我有Sam在24小时内自学Javascript，查看了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文件和一个画布。下面是我的.js文件的片段，其中包含snake功能。我只包括我正在努力的音频部分。

$(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 ....等），但这也不起作用。我越来越近了吗？我现在的一个大问题是，我需要在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标记来加载它。没有别的方法可以做到。）

对如何在蛇游戏中实现Javascript音频感到困惑？

1 个答案: