Help
Difference between revisions of "Embed audio in HTML"
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.
m (Yug moved page Help:How to embed audio in webpage? to Help:How to embed audio in webpages?: better) |
|||
(3 intermediate revisions by the same user not shown) | |||
Line 14: | Line 14: | ||
=== HTML5 & light javascript === | === HTML5 & light javascript === | ||
− | * [https://codepen.io/hugolpz/pen/QWGyVwM '''Audio 101''' – with duration, volume parameters and fade-in, fade-out 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] | * [https://codepen.io/hugolpz/pen/NWbNWWK '''Audio 101''' – with play, pause, toogle UI] | ||
<pre> | <pre> | ||
Line 49: | Line 49: | ||
'''References''' | '''References''' | ||
* https://www.w3schools.com/tags/ref_av_dom.asp | * https://www.w3schools.com/tags/ref_av_dom.asp | ||
− | |||
=== Howler.js : advanced audio library === | === Howler.js : advanced audio library === | ||
Line 87: | Line 86: | ||
* ⏺ <code>&#x23fa;</code> | * ⏺ <code>&#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 [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]] | [[Category:Lingua Libre:Help]] |
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
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
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
- ⏩
⏩
- ⏪
⏪
- ⏫
⓫
- ⏬
⏬
- ⏭
⏭
- ⏮
⏮
- ⏯
⏯
- ⏴
⏴
- ⏵
⏵
- ⏶
⏶
- ⏷
⏷
- ⏸
⏸
- ⏹
⏹
- ⏺
⏺
See HTML symbol in audio and video controls