Difference between revisions of "Embed audio in HTML"

Revision as of 12:23, 19 May 2018

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

https://howlerjs.com

Using HTML5 audio

<audio controls="controls">
  <source src="/to/folder/Bazinga.ogg" type="audio/ogg">
  Your web-browser doesn't support HTML5 audio feature. Please download and install a modern browser.
</audio>

@@ Line 1: / Line 1: @@
-=== Minimal ===
+Given an audio file <code>Bazinga.mp3</code>.
-Given an audio file Bazinga.mp3.
-'''HTML:'''
+=== Using Howler JS ===
+;HTML
 <pre>&lt;script src=&quot;./howler-2.0.8.js&quot;&gt;&lt;/script&gt;
 &lt;buton id=&quot;bazingaId&quot; class=&quot;audio&quot;&gt;Bazinga&lt;/button&gt;</pre>
-'''Javascript:'''
+;Javascript
 <pre>$('.audio').on('click', function() {
@@ Line 14: / Line 14: @@
 });</pre>
-=== References ===
+;References
 * https://howlerjs.com
+=== Using HTML5 audio ===
+<pre>
+<audio controls="controls">
+  <source src="/to/folder/Bazinga.ogg" type="audio/ogg">
+  Your web-browser doesn't support HTML5 audio feature. Please download and install a modern browser.
+</audio>
+</pre>