Dear devs,

This is an experiment bringing together Hugo and Internet Archive to provide a rock solid, lightweight and ethical solution to serve audio files.

The main objective is to share loads of audio files (hundreds of gigabytes are fine) without the hassle of Youtube / Dropbox / Soundcloud etc

Demo

  • The focus is now on audio files, but Videos and PDF files are also supported

Main features

  • built to scale: media files are served by the non-profit Internet Archive, which handles smoothly more than 5M daily users. The code is hosted by the rock-solid & lightning-fast Netlify CDN.
  • careful UX, based on a stack respecting users, creators, and devs (see below for details)
  • future-proof: It’s all built just with Hugo, Git and data from archive.org.

No other requirements:

  • no database
  • no npm
  • no security update
  • no server maintainance

What makes phoni.es different?

we are users, creators and devs all at the same time. So:

We care about users

  • no ads, no trackers
  • no account, no dark patterns
  • privacy friendly: VPN and Tor users welcome, no JS required
  • clean and responsive UI, mindful UX

We care about creators

  • no hassle: publish and forget – focus on what matters for you
  • upload full-quality WAVE files, automatically share WAVE, MP3 and Flac
  • no lock-in: all files & metadata are available for easy export / download.
    (both from the browser or from the CLI)
  • define a license for your content and display it next to the download button

We care about devs

It’s all simple technologies and pure flat files tracked in Git:

As devs, we just want to code when we want to, and stay free to postpone when we have better plans


How to use:

You can embed audio files, full albums and even videos with the provided Hugo Shortcodes.

Here is a preview:

Embedding audio files

Include audio directly in Markdown with the following Shortcode:

{{< audio "https://archive.org/download/foo/bar.mp3" >}}

An audio player will then be displayed:

This player is performant, accessible, elegant – and fully customizable with CSS variables.


Videos work too!

Here is a demo:

(See the Shortcodes documentation to learn more.)

Let’s speed up things

Automatically generating a complete media library

So far we had to include manually each file.

Let’s learn how to create, in minutes, a website collecting hundreds of audio files, videos, and PDF.

  1. Upload your files to Internet Archive
  1. List the folders to include in your library
    It’s a simple bullet list like this one:

- https://archive.org/details/lou-reed-live-and-bootlegs-1975-1977
- https://archive.org/details/lou-reed-acoustic-demos-1971
- https://archive.org/details/youtube-24en0GiOzbs
- https://archive.org/details/youtube-2dlOQxy8nPg
...
  1. Run Hugo
cd prebuild && hugo && cd .. && hugo serve
  1. Done!

You can now browse your collection at http://localhost:1313

And next?

Generate unlimited new websites in minutes – upload files, edit the list, build and done!


FAQ

How to install?

Note: the code is now being reviewed before publication.

You can join as an early tester: get access to the repo, test and discuss the future of the project!

Here is how a local install looks like:

  1. Get the code
git clone --recurse-submodules https://gitlab.com/Roneo/to-be-announced.git
  1. Define archive URLs in Yaml. For example:
- https://archive.org/details/laute-jorn
- https://archive.org/details/heya-moli
- https://archive.org/details/erba-d-agram
  1. Run locally
    (Requires Hugo extended > 0.95)
cd prebuild && hugo && cd .. && hugo serve
  1. Deploy!

Deploying to Netlify works fine, Gitlab CI should not be a problem
(Note: Deploying in One-click to Netlify is on the roadmap)

How does it work under the hood?

Remember the build command? ("cd prebuild && hugo && cd .. && hugo serve")

Let’s have a closer look:
Hugo automatically runs the following steps:

  • read URLs from archives.yml
  • for each URL, fetch Internet Archive API to get a file list and JSON metadata (like in this example)
  • each file listed out there triggers the creation of a local and dedicated Markdown file
  • Markdown content is automatically generated from metadata, following a custom template
  • Markdown files are converted to HTML with Hugo – HTML templates are also fully customizable
  • Hugo then generates a complete website, with Taxonomy, Sitemap, internal search, Blog posts, and automated listings based on filetypes (examples: /audio, /video and /PDF)
Any known limitations?

Yes, here they are:

  • No social network features, like voting, following etc. Comments may be added in the future.
  • No content monetization: some platforms provide revenue based on advertisement and viewer profiling. Archive.org doesn’t.
  • Archive.org promotes alternatives to traditional copyright and only supports the following licenses:
What was the problem with Dropbox / Google Drive / Soundcloud?

In the past I’ve used Myspace, MegaUpload, Dropbox, Google Drive, SoundCloud and . . .

.. that was bad. Really bad.

That was bad:

  • for users: invasive cookie banners, ads, trackers, endless ToS, bloatted apps, dark patterns
  • for creators: datacenters burn and services close sometime without notice, let aside the inevitable pricing updates, automated (self)censorship, endless migrations, and data loss on the way
  • for devs: we don’t want to choose between these services and self-hosting Wordpress / Nextcloud / XYZ (which are all nice but a pain to deploy, secure, maintain, upgrade, backup, etc)
Is it magic?

No. This is possible thanks to Hugo and Internet Archive.
This series of articles by Regis Philibert was a precious spark, the book Hugo in action an awesome reference, the Hugo and Archive.org communities were priceless resources along the way

Also contributed to this project: Daniel Saunders, Utkarsh Verma, Sam Potts, ajlkn and the teams and communities around Plyr

Brought to you by Yann Dumoulin ( GitlabBlogGithub )


Want to give it a try?

The code is being reviewed and will hopefully get released in June 2023.
You can already join as early tester – or receive a notification only when it’s ready:


Get in touch

You can reach me – in english or in french – at or with the following form:


2023 – Yann Dumoulin ( GitlabGithub )