Audio Styling

by rgthree

HTML

<h2>Default Audio w/ controls</h2>
<audio src="https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3" controls></audio><br>
<var></var>

<h2>Audio w/ controls & height (250) attr specified</h2>
<audio src="https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3" controls height="250"></audio><br>
<var></var>

<h2>Audio w/ controls & height (250px) style specified</h2>
<audio src="https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3" controls style="height:250px"></audio><br>
<var></var>

<h2>Audio w/ controls & width (500) attr specified</h2>
<audio src="https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3" controls width="500"></audio><br>
<var></var>

<h2>Audio w/ controls & width (500) style specified</h2>
<audio src="https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3" controls style="width:500px"></audio><br>
<var></var>

<h2>Audio w/ controls & width (1000) style specified</h2>
<audio src="https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3" controls style="width:1000px"></audio><br>
<var></var>

JavaScript

var els = document.querySelectorAll('audio');

[].slice.apply(els).forEach(function(el) {
   var data = el.nextElementSibling.nextElementSibling;
   data.textContent = el.offsetWidth + 'x' + el.offsetHeight;
});