Difference between revisions of "Embed audio in HTML"

Latest revision as of 20:44, 28 December 2023

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

<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

**Lingua Libre technical helps**
Template	{{Speakers category}} • {{Recommended lists}} • {{To iso 639-2}} • {{To iso 639-3}} • {{Userbox-records}} • {{Bot steps}}
Audio files	How to create a frequency list? • Convert files formats • Denoise files with SoX • Rename and mass rename
Bots	Help:Bots • LinguaLibre:Bot • Help:Log in to Lingua Libre with Pywikibot • Lingua Libre Bot (gh) • Olafbot • PamputtBot • Dragons Bot (gh)
MediaWiki	MediaWiki: Help:Documentation opérationelle Mediawiki • Help:Database structure • Help:CSS • Help:Rename • Help:OAuth • LinguaLibre:User rights (rate limit) • Module:Lingua Libre record & {{Lingua Libre record}} • JS scripts: MediaWiki:Common.js • LastAudios.js • SoundLibrary.js • ItemsSugar.js • LexemeQueriesGenerator.js (pad) • Sparql2data.js (pad) • LanguagesGallery.js (pad) • Gadgets: Gadget-LinguaImporter.js • Gadget-Demo.js • Gadget-RecentNonAudio.js • LiLiZip.js
Queries	Help:APIs • Help:SPARQL • SPARQL (intermediate) (stub) • SPARQL for lexemes (stub) • SPARQL for maintenance • Lingualibre:Wikidata (stub) • Help:SPARQL (HAL)
Reuses	Help:Download datasets • Help:Embed audio in HTML
Unstable & tests	Help:SPARQL/test
Categories	Category:Technical reports

@@ Line 1: / Line 1: @@
+{{#SUBTITLE:This page present various practical ways to include LinguaLibre's audio within your web applications or projects. Cases showcasted below goes from easy to more complex. You are encouraged to hack and play with them on jsfiddle, codepen or other coding pads. A larger json with filenames and some for-loop will then allow you to take full advantage of Lingualibre's large datasets.}}
+=== HTML5 audio only ===
 Given an audio file <code>Bazinga.mp3</code>.
-=== Using Howler JS ===
-;HTML
-<pre><script src="./howler-2.0.8.js"></script>
-<buton id="bazingaId" class="audio">Bazinga</button></pre>
-;Javascript
-<pre>$('.audio').on('click', function() {
-  var sound = new Howl({ src: [ '/to/folder/Bazinga.mp3','/to/folder/Bazinga.ogg' ]});
-  sound.play();
-});</pre>
-;References
-* https://howlerjs.com
-=== Using minimal HTML5 audio ===
 <pre>
 <audio controls="controls">
@@ Line 29: / Line 13: @@
 * https://www.w3schools.com/tags/tag_audio.asp
-=== Using HTML5, Jquery.js with fade-in and fade-out ===
+=== HTML5 & light javascript ===
-See [https://codepen.io/hugolpz/pen/QWGyVwM '''Audio 101''' – with typical cases parameters and behaviors]
+* [https://codepen.io/hugolpz/pen/QWGyVwM?editors=1100 '''Audio 101''' – with duration, volume parameters and fade-in, fade-out behaviors]
+* [https://codepen.io/hugolpz/pen/NWbNWWK '''Audio 101''' – with play, pause, toogle UI]
-'''Using HTML5, Jquery.js and Bootstrap.css'''
 <pre>
 <div class="audio">
@@ Line 47: / Line 30: @@
    </button>
 </div>
-<script>var waitTime = 150;
+<script>
+var waitTime = 150;
 var playItemToggle = function(item) {
    setTimeout(function () {
@@ Line 63: / Line 47: @@
 </pre>
-;Example
+'''References'''
-* https://codepen.io/hugolpz/pen/NWbNWWK
 * https://www.w3schools.com/tags/ref_av_dom.asp
+=== Howler.js : advanced audio library ===
+;HTML
+<pre>
+<script src="./howler-2.0.8.js"></script>
+<buton id="bazingaId" class="audio">Bazinga</button>
+</pre>
+;Javascript
+<pre>
+$('.audio').on('click', function() {
+  var sound = new Howl({ src: [ '/to/folder/Bazinga.mp3','/to/folder/Bazinga.ogg' ]});
+  sound.play();
+});
+</pre>
+;References
+* https://howlerjs.com
 === Audio controls characters ===
@@ Line 83: / Line 86: @@
 * ⏺ <code>&amp;#x23fa;</code>
 See [https://stackoverflow.com/questions/22885702/html-for-the-pause-symbol-in-a-video-control HTML symbol in audio and video controls]
+== See also ==
+{{Technicals}}
 [[Category:Lingua Libre:Help]]