Embed audio in HTML

HTML5 audio only

Given an audio file Bazinga.mp3.

<audio controls="controls">
  <source src="/to/folder/Bazinga.ogg" type="audio/ogg">
  <source src="/to/folder/Bazinga.mp3" type="audio/mpeg"><!-- fallback -->
  Your browser does not support HTML5 audio. Please download and install a modern browser.
</audio>

References

• https://www.w3schools.com/tags/tag_audio.asp

HTML5 & light javascript

• Audio 101 – with duration, volume parameters and fade-in, fade-out behaviors
• Audio 101 – with play, pause, toogle UI

<div class="audio">
  <audio id="" preload="auto">
    <source src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Africanagogosound.ogg" type="audio/ogg">
    Your browser does not support HTML5 audio.
  </audio>

  <button class="btn btn-primary">
    <span class="play"><text>⏵</text></span>
  </button>
  <button class="btn btn-info" style="display:none;">
    <span class="pause"><text>⏸</text></span>
  </button>
</div>
<script>
var waitTime = 150;
var playItemToggle = function(item) {
  setTimeout(function () { 
    if (item.paused) { /*item.load();*/ item.play() } 
    else { item.pause(); }
  }, waitTime);
} 

$('.audio').on('click', function() {
  var $audio = $(this).find('audio')[0],
  $btns  = $(this).find('.btn');
  $btns.toggle();
  playItemToggle($audio);
});</script>

References

• https://www.w3schools.com/tags/ref_av_dom.asp

Howler.js : advanced audio library

HTML

<script src="./howler-2.0.8.js"></script>
<buton id="bazingaId" class="audio">Bazinga</button>

Javascript

$('.audio').on('click', function() {  
  var sound = new Howl({ src: [ '/to/folder/Bazinga.mp3','/to/folder/Bazinga.ogg' ]});
  sound.play();
});

References

• https://howlerjs.com

Audio controls characters

• ⏩ ⏩
• ⏪ ⏪
• ⏫ ⓫
• ⏬ ⏬
• ⏭ ⏭
• ⏮ ⏮
• ⏯ ⏯
• ⏴ ⏴
• ⏵ ⏵
• ⏶ ⏶
• ⏷ ⏷
• ⏸ ⏸
• ⏹ ⏹
• ⏺ ⏺

See HTML symbol in audio and video controls