title: HTML audio element created with innerHTML throws a DOMException when played
body: <p>I have created a module that creates the HTML templates from <code>[String]</code> content. Generally it works like below:</p>
  
  <pre><code>const wrapper = document.createElement('TEMPLATE');
  wrapper.innerHTML = '&lt;div id="container"&gt;&lt;/div&gt;'; //some string content
  const content = wrapper.content.querySelector('#container'); //return DOM Element
  </code></pre>
  
  <p>The problem occurs, when I try to create an <code>&lt;audio&gt;</code> element this way. Then, when a DOM audio element is created and when I call <code>.play()</code>, it throws an error <code>Uncaught (in promise) DOMException</code>. It works fine when I use <code>document.createElement('DIV')</code> rather than <code>'TEMPLATE'</code> as a wrapper.</p>
  
  <p>I <strong>need</strong> to create a <code>TEMPLATE</code> wrapper rather than eg. <code>'DIV'</code>, because when I want to create some template for <code>TR</code> elements, the <code>DIV</code> wrapper does not work for it.</p>
  
  <p>The audio element created in both ways is the regular DOM Audio Element, so why there is an error, when I try to play the audio created with the <code>'TEMPLATE'</code>?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Now I can see that it:</p>
  
  <ul>
  <li>does not work in <code>Chrome</code> and <code>Firefox</code></li>
  <li>works well in <code>Edge</code></li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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 = `&lt;audio id="player" src="${src}"&gt;&lt;/audio&gt;`;
  
  divWrapper.innerHTML = innerContent;
  templateWrapper.innerHTML = innerContent;
  
  const divAudio = divWrapper.querySelector('#player');
  const templateAudio = templateWrapper.content.querySelector('#player');
  
  divButton.addEventListener('click',()=&gt;divAudio.play());
  templateButton.addEventListener('click',()=&gt;templateAudio.play());
  
  divAudio.onerror = (event)=&gt; output.innerHTML = event.target.error.message;
  
  templateAudio.onerror = (event)=&gt; output.innerHTML = event.target.error.message;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="button-a"&gt;Play audio created with 'DIV' container&lt;/button&gt;&lt;/br&gt;&lt;/br&gt;
  &lt;button id="button-b"&gt;Play audio created with 'TEMPLATE' container&lt;/button&gt;
  
  &lt;p id="output"&gt;&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>