Question

我创建了一个模块，该模块从[String]内容创建HTML模板。通常它的工作方式如下：

const wrapper = document.createElement('TEMPLATE');
wrapper.innerHTML = '<div id="container"></div>'; //some string content
const content = wrapper.content.querySelector('#container'); //return DOM Element

当我尝试以此方式创建<audio>元素时，会出现问题。然后，当创建DOM音频元素时，当我调用.play()时，它会引发错误Uncaught (in promise) DOMException。当我使用document.createElement('DIV')而不是'TEMPLATE'作为包装器时，效果很好。

我需要创建一个TEMPLATE包装器，而不是例如。 'DIV'，因为当我想为TR元素创建一些模板时，DIV包装器对此无效。

以两种方式创建的音频元素都是常规的DOM音频元素，那么当我尝试播放用'TEMPLATE'创建的音频时为什么会出错？

编辑：

现在我可以看到它：

在Chrome和Firefox中不起作用
在Edge上运行良好

const divButton = document.getElementById('button-a');
const templateButton = document.getElementById('button-b');
const output = document.getElementById('output');

const divWrapper = document.createElement('DIV');
const templateWrapper = document.createElement('TEMPLATE');

const src = "https://www.collinsdictionary.com/sounds/hwd_sounds/03090.mp3";
const innerContent = `<audio id="player" src="${src}"></audio>`;

divWrapper.innerHTML = innerContent;
templateWrapper.innerHTML = innerContent;

const divAudio = divWrapper.querySelector('#player');
const templateAudio = templateWrapper.content.querySelector('#player');

divButton.addEventListener('click',()=>divAudio.play());
templateButton.addEventListener('click',()=>templateAudio.play());

divAudio.onerror = (event)=> output.innerHTML = event.target.error.message;

templateAudio.onerror = (event)=> output.innerHTML = event.target.error.message;

<button id="button-a">Play audio created with 'DIV' container</button></br></br>
<button id="button-b">Play audio created with 'TEMPLATE' container</button>

<p id="output"></p>

使用innerHTML创建的HTML音频元素在播放时抛出DOMException

0 个答案: