Help

Difference between revisions of "Embed audio in HTML"

Line 30: Line 30:
  
 
=== Using HTML5, Jquery.js with fade-in and fade-out ===
 
=== Using HTML5, Jquery.js with fade-in and fade-out ===
See https://jsfiddle.net/7txkt5k6/12/
+
See [https://codepen.io/hugolpz/pen/QWGyVwM '''Audio 101''' – with typical cases parameters and behaviors]
  
 
=== Using HTML5, Jquery.js and Bootstrap.css ===
 
=== Using HTML5, Jquery.js and Bootstrap.css ===

Revision as of 01:03, 6 February 2021

Given an audio file Bazinga.mp3.

Using Howler JS

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

Using minimal HTML5 audio

<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

Using HTML5, Jquery.js with fade-in and fade-out

See Audio 101 – with typical cases parameters and behaviors

Using HTML5, Jquery.js and Bootstrap.css

<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>
Example

Audio controls characters

  • &#x23e9;
  • &#x23ea;
  • &#x24eb;
  • &#x23ec;
  • &#x23ed;
  • &#x23ee;
  • &#x23ef;
  • &#x23f4;
  • &#x23f5;
  • &#x23f6;
  • &#x23f7;
  • &#x23f8;
  • &#x23f9;
  • &#x23fa;

See HTML symbol in audio and video controls