Stuff

src/app/app.config.ts

@@ -0,0 +1,11 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes)
+  ]
+};

src/app/app.html

@@ -0,0 +1 @@
+<router-outlet />

src/app/app.routes.ts

@@ -0,0 +1,9 @@
+import { Routes } from '@angular/router';
+import {HomePage} from './pages/homepage/homepage';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: HomePage
+  }
+];

src/app/app.spec.ts

@@ -0,0 +1,23 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, jukesquare');
+  });
+});

src/app/app.ts

@@ -0,0 +1,12 @@
+import { Component, signal } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet],
+  templateUrl: './app.html',
+  styleUrl: './app.scss'
+})
+export class App {
+  protected readonly title = signal('jukesquare');
+}

src/app/models/file.ts

@@ -0,0 +1,9 @@
+export class File {
+  constructor(
+    public filename: string,
+    public filepath: string,
+    public size: number,
+  ) {
+
+  }
+}

src/app/models/track.ts

@@ -0,0 +1,12 @@
+import {TrackMeta} from './trackmeta';
+
+export class Track {
+  constructor(
+    public file: File,
+    public meta: TrackMeta,
+    public length: number,
+    public format: string,
+    public bitrate: number,
+  ) {
+  }
+}

src/app/models/trackmeta.ts

@@ -0,0 +1,10 @@
+export class TrackMeta {
+  constructor(
+    public title: string,
+    public artist: string,
+    public album: string,
+    public genre: string,
+    public trackNumber: number,
+  ) {
+  }
+}

src/app/pages/homepage/homepage.html

@@ -0,0 +1,3 @@
+Home
+
+<button id="play" (click)="play($event)">Play</button>

src/app/pages/homepage/homepage.ts

@@ -0,0 +1,18 @@
+import {Component, OnInit, viewChild} from '@angular/core';
+import {AudioService} from '../../services/audio.service';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: 'homepage.html',
+})
+export class HomePage{
+  protected audio: AudioService;
+
+  constructor() {
+    this.audio = new AudioService();
+  }
+
+  play(event: Event): void {
+    this.audio.play();
+  }
+}

src/app/services/audio.service.ts

@@ -0,0 +1,30 @@
+import {HttpClient} from '@angular/common/http';
+
+export class AudioService {
+  protected context: AudioContext;
+  protected track?: MediaElementAudioSourceNode;
+
+  constructor() {
+    this.context = new AudioContext();
+  }
+
+  createElement(filename: string) {
+    const element = document.createElement('audio');
+    const source = document.createElement('source');
+    source.src = filename;
+    source.type = 'audio/mp3';
+    element.appendChild(source);
+    return element;
+  }
+
+  async play(): Promise<void> {
+    if (this.context.state === 'suspended') {
+      await this.context.resume();
+    }
+    const element = this.createElement('audio/1.mp3');
+    this.track = this.context.createMediaElementSource(element);
+    this.track.connect(this.context.destination);
+
+    await element.play();
+  }
+}

src/app/services/file.service.ts

@@ -0,0 +1,5 @@
+export class FileService {
+  getFile(uuid: string) {
+
+  }
+}

src/app/services/mock/file.json

@@ -0,0 +1,3 @@
+{
+  "filename": ""
+}