Question

我想在HTML文件中播放背景音频（不能更改为svg文件）。

我也将音频放入<svg>标签内（必需）。

<html>
        <svg>
            <audio id="backgroundmusic" loop>
                <source src="backgroundmusic.wav" type="audio/wav" />
            </audio>
        </svg>
</html>

然后，我使用其他.js文件中的函数来播放音频。

function playaudio(id){
var audiotesting = document.getElementById(id);
    audiotesting.currentTime = 0;
    audiotesting.play();
}

该功能可能无法正常工作。有什么方法可以在<svg>标签内播放音频？

Answer 1

实际上，除了HTMLDocument之类的类以及与HTML直接相关的事物（HTML*Element类）之外，没有一个Web API专门与HTML绑定。否则，无论文档类型如何，脚本解释器都可以使用所有API-window对象及其document属性，以及所有其他全局类（包括HTMLDocument）。

您粘贴的JavaScript代码段可以与托管它的SVG文档以及HTML文档一起使用。问题在于访问音频元素-可以将其嵌入和放置在哪里？ getElementById会发现它很好，但是会发现它是一个具有本地名称audio的XML元素，它不知道它与HTML audio元素相关，一点也不知道。元素没有play或currentTime属性。

对于SVG文档，您可以通过script元素嵌入脚本解释器，就像HTML一样。

但是，您不能只是将我假定的HTML audio元素放在SVG甚至是“内联” SVG文档中。不过，您至少有两个选择：

使用SVG中的foreignObject工具嵌入音频：
将audio元素放在外部 SVG中。如果您只关心音频的播放，而不是浏览器通常提供的音频控件的便利性，那么将元素置于SVG内不会比这更糟。问问自己，为什么首先要在SVG中使用audio元素？

SVG标签中的html文件和音频

1 个答案: