Html и аудио в теге SVG
Я хочу воспроизвести фоновый звук в файле 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>?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
На самом деле, ни один из веб-API не привязан к HTML специально - за исключением таких классов, как HTMLDocument, и вещей, которые напрямую связаны с HTML (классы HTML*Element), очевидно. В противном случае интерпретатору сценария доступны все API, независимо от типа документа - объект window и его свойство document, а также все остальные глобальные классы, включая HTMLDocument.
Вставленный фрагмент JavaScript будет работать с документом SVG, в котором он находится, так же хорошо, как и с документом HTML. Проблема заключается в доступе к аудиоэлементу - где его можно встроить и разместить? getElementById сочтет это нормальным, но найдет его как XML-элемент с локальным именем audio, он не узнает, что это связано с HTML-элементом audio, совсем нет. Элемент не имеет свойств play или currentTime.
В документ SVG вы встраиваете интерпретатор сценария через элемент script, как и в случае с HTML.
Однако вы не мочь просто помещаете то, что я предполагаю, это HTML-элемент audio прямо внутри SVG, даже «встроенного» SVG-документа. Однако у вас есть как минимум два варианта:
Поместите
audioэлемент вне SVG. Если вас интересует только воспроизведение звука, а не дополнительное удобство элементов управления звуком, которые браузер обычно может отображать, вам будет не хуже, чем наличие элемента внутри SVG. Спросите себя, зачем вам вообще нужен элементaudioвнутри SVG?
спасибо за ваше объяснение и за совет по использованию foreignObject.