Help

Embed audio in HTML

(Redirected from Help:How to embed audio in webpage?)
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 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

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

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

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

See also

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 formatsDenoise files with SoXRename and mass rename
Bots Help:BotsLinguaLibre:BotHelp:Log in to Lingua Libre with PywikibotLingua Libre Bot (gh) • OlafbotPamputtBotDragons Bot (gh)
MediaWiki MediaWiki: Help:Documentation opérationelle MediawikiHelp:Database structureHelp:CSSHelp:RenameHelp:OAuthLinguaLibre:User rights (rate limit) • Module:Lingua Libre record & {{Lingua Libre record}}JS scripts: MediaWiki:Common.jsLastAudios.jsSoundLibrary.jsItemsSugar.jsLexemeQueriesGenerator.js (pad) • Sparql2data.js (pad) • LanguagesGallery.js (pad) • Gadgets: Gadget-LinguaImporter.jsGadget-Demo.jsGadget-RecentNonAudio.jsLiLiZip.js
Queries Help:APIsHelp:SPARQLSPARQL (intermediate) (stub) • SPARQL for lexemes (stub) • SPARQL for maintenanceLingualibre:Wikidata (stub) • Help:SPARQL (HAL)
Reuses Help:Download datasetsHelp:Embed audio in HTML
Unstable & tests Help:SPARQL/test
Categories Category:Technical reports