Help
Embed audio in HTML
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
HTML5 audio only
<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
Audio controls characters
- ⏩
⏩
- ⏪
⏪
- ⏫
⓫
- ⏬
⏬
- ⏭
⏭
- ⏮
⏮
- ⏯
⏯
- ⏴
⏴
- ⏵
⏵
- ⏶
⏶
- ⏷
⏷
- ⏸
⏸
- ⏹
⏹
- ⏺
⏺