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 | 1x 8x 8x 8x 8x 7x 3x 6x 6x 6x 3x 3x 3x 3x 2x 2x 101x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 1x 2x 2x 1x 2x 2x 1x 2x 2x 1x 2x 1x 4x | /**
* @module kung-fu/components
*/
export interface AudioPlayerOptions {
ContainerID: string;
DefaultSource: string;
}
export class AudioPlayer {
private _opts: AudioPlayerOptions;
private _audioContainer: HTMLDivElement;
constructor(opts: AudioPlayerOptions) {
this._opts = opts;
const { ContainerID, DefaultSource } = this._opts;
const audioContainer = document.querySelector(`#${ ContainerID }`) as HTMLDivElement;
const audioPlayer = audioContainer.querySelector('audio') as HTMLAudioElement;
if(DefaultSource != null) {
audioPlayer.src = DefaultSource;
}
Iif(audioPlayer.controls == null) {
audioPlayer.controls = true;
}
audioPlayer.style.display = 'block';
this._audioContainer = audioContainer;
}
public withPlaylist(playlistID: string): void {
const self = this;
const audioPlayer = self._audioContainer.querySelector('audio') as HTMLAudioElement;
const playlist = document.querySelector(`#${ playlistID }`) as HTMLDataListElement;
const anchorNodes: NodeListOf<HTMLElement> = playlist.querySelectorAll('dt');
const anchors = Array.from(anchorNodes);
anchors.forEach((anchor: HTMLElement) => {
anchor.addEventListener('click', function(): void {
const source = anchor.getAttribute('data-source') as string;
const img = anchor.getAttribute('data-cover-img') as string;
const title = anchor.getAttribute('data-title') || anchor.innerText as string;
const pubDate = anchor.getAttribute('data-pub') as string;
const summary = anchor.getAttribute('data-summary') as string;
audioPlayer.pause();
audioPlayer.src = source;
const audioPlayerCover = self._audioContainer.querySelector('#audio-player-cover') as HTMLDivElement;
if(audioPlayerCover) {
const coverImage: HTMLImageElement = document.createElement('img');
coverImage.src = img;
coverImage.title = title;
coverImage.alt = title;
audioPlayerCover.innerHTML = '';
audioPlayerCover.appendChild(coverImage);
}
const audioPlayerTitle = self._audioContainer.querySelector('#audio-player-title') as HTMLDivElement;
if(audioPlayerTitle) {
audioPlayerTitle.innerText = title;
}
const audioPlayerDate = self._audioContainer.querySelector('#audio-player-date') as HTMLDivElement;
if(audioPlayerDate) {
audioPlayerDate.innerText = pubDate;
}
const audioPlayerSummary = self._audioContainer.querySelector('#audio-player-summary') as HTMLDivElement;
if(audioPlayerSummary) {
audioPlayerSummary.innerText = summary;
}
audioPlayer.play();
});
});
}
}
export const createAudioPlayer = (audioContainerID: string, defaultSource?: string): AudioPlayer => {
return new AudioPlayer({ ContainerID: audioContainerID, DefaultSource: defaultSource as string });
};
|