Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/anthumchris/fetch-stream-audio

Low Latency web audio playback examples for decoding audio streams in chunks with Fetch & Streams APIs
https://github.com/anthumchris/fetch-stream-audio

fetch-api javascript javascript-fetch ogg-opus opus opus-codec opus-decoder stream streams-api web-audio web-audio-api webassembly

Last synced: about 1 month ago
JSON representation

Low Latency web audio playback examples for decoding audio streams in chunks with Fetch & Streams APIs

Awesome Lists containing this project

README 

        




# Demo



https://fetch-stream-audio.anthum.com/








# Background



This repo provides low-latency web audio playback examples for programatically decoding audio in chunks with the Web Audio API and the new Fetch & Streams APIs.  Traditionally, [`decodeAudioData()`](https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/decodeAudioData) is used for programmatic decoding but requires the complete file to be downloaded, and chunk-based decoding is not supported.  These Streams examples will show how to sidestep that limitation.  Media Source Extensions could also be used to play audio and that example may be integrated here one day.



The examples demonstrate:



1. **Opus Streaming** [`opus-stream-decoder`](https://github.com/AnthumChris/opus-stream-decoder) is used to decode an [Opus](http://opus-codec.org/) file in a Web Worker with WebAssembly.  This simulates a real-world use case of streaming compressed audio over the web with the Web Audio  API.  (MP3 is old and outdated for those of us who grew up with WinPlay3.  Opus is the new gold standard).  This example is ideal because it allows for small, high-quality files with Opus.

1. **WAV Streaming**  A WAV file is streamed and decoded by a Web Worker.  Chunks are scheduled into a read buffer before sending to encoder to ensure decoder receives complete, decodable chunks.  JavaScript (not WebAssembly) is used for decoding. This example requires a much larger file.



# Opus Playback Tests



Opus file playback can be tested at throttled download speeds and varkous encoding/bitrate qualities ([Issue #14](https://github.com/AnthumChris/fetch-stream-audio/issues/14) will add to UI):



[opusBitrate = 96; throttle = nolimit](https://fetch-stream-audio.anthum.com/#opusBitrate=96;throttle=nolimit)


[opusBitrate = 96; throttle = 1mbps](https://fetch-stream-audio.anthum.com/#opusBitrate=96;throttle=1mbps)


[opusBitrate = 96; throttle = 104kbps](https://fetch-stream-audio.anthum.com/#opusBitrate=96;throttle=104kbps)


[opusBitrate = 96; throttle = 100kbps](https://fetch-stream-audio.anthum.com/#opusBitrate=96;throttle=100kbps)


[opusBitrate = 64; throttle = 72kbps](https://fetch-stream-audio.anthum.com/#opusBitrate=64;throttle=72kbps)


[opusBitrate = 60; throttle = 64kbps](https://fetch-stream-audio.anthum.com/#opusBitrate=60;throttle=64kbps)


[opusBitrate = 53; throttle = 56kbps](https://fetch-stream-audio.anthum.com/#opusBitrate=53;throttle=56kbps)


[opusBitrate = 32; throttle = 40kbps](https://fetch-stream-audio.anthum.com/#opusBitrate=32;throttle=40kbps)


[opusBitrate = 28; throttle = 32kbps](https://fetch-stream-audio.anthum.com/#opusBitrate=28;throttle=32kbps)


[opusBitrate = 12; throttle = 16kbps](https://fetch-stream-audio.anthum.com/#opusBitrate=12;throttle=16kbps)



# Back-End Nginx Server



To use the config files, create symblink `fetch-stream-audio`, e.g.:



```

$ ln -s [LOCATION_TO_THIS_REPO]/.conf/nginx /etc/nginx/fetch-stream-audio

```



Then, include this repo's nginx config file into your `server {}` block, e.g.:



```nginx

server {

  ...



  disable_symlinks off;

  include fetch-stream-audio/include-server.conf;

}

```



## Throttled Bandwidth Endpoints



All `/audio/*` URIs are configured to intentionally limit download speeds and control response packet sizes for testing the decoding behavior (defined in [include-server.conf](.conf/nginx/include-server.conf)).  For example:



https://fetch-stream-audio.anthum.com/nolimit/opus/decode-test-64kbit.opus


https://fetch-stream-audio.anthum.com/10mbps/opus/decode-test-64kbit.opus


https://fetch-stream-audio.anthum.com/1.5mbps/opus/decode-test-64kbit.opus


https://fetch-stream-audio.anthum.com/512kbps/opus/decode-test-64kbit.opus



All Throttled Endpoints



| Speed      | Example URL |

| ----------- | ----------- |

| 16 kbps | https://fetch-stream-audio.anthum.com/16kbps/opus/decode-test-64kbit.opus |

| 24 kbps | https://fetch-stream-audio.anthum.com/24kbps/opus/decode-test-64kbit.opus |

| 32 kbps | https://fetch-stream-audio.anthum.com/32kbps/opus/decode-test-64kbit.opus |

| 40 kbps | https://fetch-stream-audio.anthum.com/32kbps/opus/decode-test-40kbit.opus |

| 56 kbps | https://fetch-stream-audio.anthum.com/32kbps/opus/decode-test-56kbit.opus |

| 64 kbps | https://fetch-stream-audio.anthum.com/64kbps/opus/decode-test-64kbit.opus |

| 72 kbps | https://fetch-stream-audio.anthum.com/72kbps/opus/decode-test-64kbit.opus |

| 80 kbps | https://fetch-stream-audio.anthum.com/80kbps/opus/decode-test-64kbit.opus |

| 88 kbps | https://fetch-stream-audio.anthum.com/88kbps/opus/decode-test-64kbit.opus |

| 96 kbps | https://fetch-stream-audio.anthum.com/96kbps/opus/decode-test-64kbit.opus |

| 100 kbps | https://fetch-stream-audio.anthum.com/100kbps/opus/decode-test-64kbit.opus |

| 104 kbps | https://fetch-stream-audio.anthum.com/104kbps/opus/decode-test-64kbit.opus |

| 112 kbps | https://fetch-stream-audio.anthum.com/112kbps/opus/decode-test-64kbit.opus |

| 120 kbps | https://fetch-stream-audio.anthum.com/120kbps/opus/decode-test-64kbit.opus |

| 128 kbps | https://fetch-stream-audio.anthum.com/128kbps/opus/decode-test-64kbit.opus |

| 160 kbps | https://fetch-stream-audio.anthum.com/160kbps/opus/decode-test-64kbit.opus |

| 192 kbps | https://fetch-stream-audio.anthum.com/192kbps/opus/decode-test-64kbit.opus |

| 256 kbps | https://fetch-stream-audio.anthum.com/256kbps/opus/decode-test-64kbit.opus |

| 384 kbps | https://fetch-stream-audio.anthum.com/384kbps/opus/decode-test-64kbit.opus |

| 512 kbps | https://fetch-stream-audio.anthum.com/512kbps/opus/decode-test-64kbit.opus |

| 768 kbps | https://fetch-stream-audio.anthum.com/768kbps/opus/decode-test-64kbit.opus |

| 1 mbps | https://fetch-stream-audio.anthum.com/1mbps/opus/decode-test-64kbit.opus |

| 4 mbps | https://fetch-stream-audio.anthum.com/4mbps/opus/decode-test-64kbit.opus |

| 5 mbps | https://fetch-stream-audio.anthum.com/5mbps/opus/decode-test-64kbit.opus |

| 2 mbps | https://fetch-stream-audio.anthum.com/2mbps/opus/decode-test-64kbit.opus |

| 3 mbps | https://fetch-stream-audio.anthum.com/3mbps/opus/decode-test-64kbit.opus |

| 4 mbps | https://fetch-stream-audio.anthum.com/4mbps/opus/decode-test-64kbit.opus |

| 5 mbps | https://fetch-stream-audio.anthum.com/5mbps/opus/decode-test-64kbit.opus |

| 6 mbps | https://fetch-stream-audio.anthum.com/6mbps/opus/decode-test-64kbit.opus |

| 7 mbps | https://fetch-stream-audio.anthum.com/7mbps/opus/decode-test-64kbit.opus |

| 8 mbps | https://fetch-stream-audio.anthum.com/8mbps/opus/decode-test-64kbit.opus |

| 9 mbps | https://fetch-stream-audio.anthum.com/9mbps/opus/decode-test-64kbit.opus |

| 10 mbps | https://fetch-stream-audio.anthum.com/10mbps/opus/decode-test-64kbit.opus |

| nolimit | https://fetch-stream-audio.anthum.com/nolimit/opus/decode-test-64kbit.opus
https://fetch-stream-audio.anthum.com/audio/opus/decode-test-64kbit.opus |



# Development & Building



Please remember that this is a proof-of-concept demo intended to show developers alternative (and possibly better) ways to play web audio.  Currently, there's no formal package or release (see [#21](https://github.com/AnthumChris/fetch-stream-audio/issues/21)), so you'll need to improvise a little to get this working in your apps or websites.



I prefer [Yarn](https://yarnpkg.com/getting-started), and you'll need Yarn or [NodeJS](https://nodejs.org/en/) installed to build the project. [`app.js`](https://github.com/AnthumChris/fetch-stream-audio/blob/master/src/js/app.js) is the entry point for starting with the code.



```bash

# clone repo and install dependencies

$ git clone https://github.com/AnthumChris/fetch-stream-audio

$ cd fetch-stream-audio

$ yarn install

```



```bash

# run the development server in "watch" mode to automatically re-build your changes

$ yarn dev

```



```bash

# build the project formally with minification

$ yarn build

```



# Acknowledgements



Thanks to [@bjornm](https://github.com/bjornm) for pointing me to [@mohayonao](https://github.com/mohayonao)'s WAV decoder: https://github.com/mohayonao/wav-decoder