https://github.com/francostramana/multitrack-player

A web based Multitrack Audio Player using the OMT model :notes:
https://github.com/francostramana/multitrack-player

omt thread webworker worker

Last synced: about 1 month ago
JSON representation

A web based Multitrack Audio Player using the OMT model :notes:

• Host: GitHub
• URL: https://github.com/francostramana/multitrack-player
• Owner: francostramana
• Created: 2020-06-21T00:17:44.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T22:43:09.000Z (about 2 years ago)
• Last Synced: 2024-10-12T08:09:10.471Z (2 months ago)
• Topics: omt, thread, webworker, worker
• Language: WebAssembly
• Homepage:
• Size: 289 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Multitrack Audio Player

Este proyecto fue creado con fines educativos para abarcar algunos aspectos relacionados con la **performance web**.

## Qué vamos a hacer?

- "Off the Main Thread": Usaremos Web Workers para procesar tareas con gran costo computacional fuera del hilo principal asi no bloqueamos la UI. (Threading)

- Web Assembly: Vamos a compilar y correr nuestro propio código c++ para usarlo desde JS.

- PWA: Vamos a convertir nuestra aplicación en una aplicación web progresiva para mejorar la usabilidad.

## Por qué (super) Vainilla JS?

Amamos todo lo relacionado con Tooling y FW's JS, pero este proyecto fué armado con fines educativos y nuestro interés es que no se pierde el punto central. Cada uno/a lo puede aplicar en su framework favorito. 

## Run

Para correrlo simplemente copiá la carpeta en tu web server favorito, o si tenés **npm** ejecuta: `npm run start` (previamente instala dependencias con `npm install`). Este comando levantará el proyecto en _http://localhost:8080_.

### Dataset ejemplo

Podés usar este multitrack de The Beatles para probar la app: https://drive.google.com/drive/u/0/folders/1VrBsuHtpYQ8r0kDX7Ugtx7gNuN3aCjUL

### Load with fetch

```JS

fetch('assets/bloch_prayer.mp3')

    .then(response => {

      if (!response.ok) {

        throw new Error("HTTP error, status = " + response.status);

      }

      return response.arrayBuffer();

    })

    .then(arrayBuffer => audioCtx.decodeAudioData(arrayBuffer))

    .then(decodedData => {

      source.buffer = decodedData;

      console.log("buffer fulled!");

    });

```

### clone buffer

```JS

    // clona el buffer para trasnferirlo a distintos workers

    let pcm = new Float32Array(buffer.getChannelData(0).length);

    pcm.set(buffer.getChannelData(0))

```