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 | 9x 11x 11x 9x 11x 9x 19x 19x 19x 9x 11x 13x 13x 13x 13x 9x 3x 3x 3x 3x 3x 3x 9x | import { getFileName, getFileType } from "../utils/helpers";
export type AudioElement = HTMLAudioElement & {
key: number;
mute?: boolean;
tmpVolume?: number;
elements?: {
[key: string]: HTMLElement;
};
};
type Meta = {
url: string;
fileType: string;
fileName: string;
title: string;
artist: string | false;
};
// Return an array of all the <audio> elements found on the page.
export const findAudio = (context: HTMLElement | Document): AudioElement[] => {
// Get all the <audio> occurrences in the page.
const audioElements = context.getElementsByTagName("audio");
const audioElementsArrayWithKeys = [...audioElements].map(
// don't spread the node, just assign the key
(node, i) => Object.assign(node, { key: i }) as AudioElement
);
return audioElementsArrayWithKeys;
};
// Build an array of classes to add to each new "player" element
export const prepareClasses = (
index: number,
classes: string,
theme: string
) => {
const classesString = `picobel loading picobel--index-${index} ${classes}`;
const classesArray = classesString.trim().split(" ");
return [...classesArray, theme];
};
// Get the url for each audio file we want to load [using elements found by findAudio()]
export const getRawData = (nodes: AudioElement[]) =>
nodes.map((node, key) => {
node.key = key;
node.mute = false;
node.tmpVolume = 1;
return node;
});
// Get info about the audio track
export const getMeta = (item: AudioElement): Meta => {
const url = item.currentSrc;
const fileType = getFileType(url);
const fileName = getFileName(url);
const title =
item.title && item.title !== ""
? item.title
: `${fileName}.${fileType}`;
const artist = item.dataset?.artist ? item.dataset.artist : false;
return { url, fileType, fileName, title, artist };
};
export const checkURL = async (url: string): Promise<boolean | null> => {
try {
const response = await fetch(url);
console.log({ url, response });
return response.ok; // URL is valid and reachable
} catch (error) {
if (error instanceof Error) {
console.error(error.message);
} else {
console.error("Unknown error");
}
// Handle the error accordingly (e.g., set an error state or use a fallback URL)
return null; // Indicate failure
}
}; |