james murphy djlotus
djlotus
/ audiosprite.js
Created
March 19, 2017 19:13
— forked from remy/audiosprite.js
An example of how an audio sprite can be used (includes fixes for iOS)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function Track(src, spriteLength, audioLead) { | |
| var track = this, | |
| audio = document.createElement('audio'); | |
| audio.src = src; | |
| audio.autobuffer = true; | |
| audio.load(); | |
| audio.muted = true; // makes no difference on iOS :( | |
| /* This is the magic. Since we can't preload, and loading requires a user's | |
| input. So we bind a touch event to the body, and fingers crossed, the |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <main role="main" id="main"> | |
| <section> | |
| <div class="row"> | |
| <h1>Accessible Tabs-to-Accordions</h1> | |
| <p>The goal is to make a tabs-to-accordions web component that is accessible to all users and is supported back to IE8 :( </p> | |
| <p>I followed advice from <a href="http://www.tink.uk">Léonie Watson</a> on how the component should function with a keybord and set it up so users with JS disabled would see/has access to all of the content contained in the component.</p> | |
| <p>I just began writing JS a few months ago so I'm sure the code can be cleaned up and/or optimised but it gets the job done which, in my opinion, is most important.</p> | |
| <hr /> | |
| <p class="panel">If you see anything that should be updated/fixed/optimized please fork this and drop me a line.<br/><strong><em>Ignore the missing icon-font on the accordions in mobile view. I know, i know, i know. DON'T USE ICON-FONTS.</em></strong></p> | |