Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | 2x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x 3x | import { parseOptions } from "./core/setup"; import { findAudio, getRawData } from "./core/data"; import { generateMarkup, elementHooks } from "./markup"; import { _setupLocalListeners } from "./core/events"; import { canplaythrough } from "./core/audio-functions"; /** * --------------------------------------------------------------------------- * ____ _ _ _ _ * | _ \(_) ___ ___ | |__ ___| | (_)___ * | |_) | |/ __/ _ \| '_ \ / _ \ | | / __| * | __/| | (_| (_) | |_) | __/ |_ | \__ \ * |_| |_|\___\___/|_.__/ \___|_(_)| |___/ * Picobel.js _/ | * tomhazledine.com/audio |__/ * * =========================================================================== * * Replace any native <audio> instances with standard elements (spans, * buttons & divs) that we can style however we like. * * Functionality powered by Web Audio API. * --------------------------------------------------------------------------- */ export const picobel = (rawOptions = {}) => { /** * ----------------------------------------------------------------------- * RUN THE CODE * * This is where the methods are called. Reading these lines should * give you a step-by-step overview of what Picobel does. * ----------------------------------------------------------------------- */ // Parse the options const options = parseOptions(rawOptions); // Declare a `state` variable that will hold the active state let state = { audioNodes: [], theme: options.theme, components: options.components }; const _replaceNodes = (audioElements, newMarkup) => { audioElements.map((element, key) => { element.parentNode.replaceChild(newMarkup[key], element); }); }; // Get audio elements from page, and save their details to state. state.audioNodes = findAudio(options.context); state.audioNodes = getRawData(state.audioNodes); // Build markup for each element, based on `components` const markup = generateMarkup( state.audioNodes, state.components, state.theme ); // Replace audio elements in DOM with new markup _replaceNodes(state.audioNodes, markup); // Save new DOM elements to our node list state.audioNodes = elementHooks( state.audioNodes, options.context, state.theme ); // Setup event listeners state.audioNodes = _setupLocalListeners(state.audioNodes); // Check status state.audioNodes.forEach(node => { const { readyState } = node; if (readyState === 4) { canplaythrough(node); } }); return { state }; }; |