Audio player

[[TOC]]

About project

This project provides a drop-in replacement for flash player on Anon.fm site.

The player has to be able to:

• play music stream
• show tags
• change stream quality
• change music volume

My vision of project

I think that player should:

• look like header line
• use modern technologies
• succeed ideas of TWP contest player
• use userscript technology and can be deployed to server
• fit different desktop sizes

Demo

The easiest way is to run gitpod instance.

Install

Before install

Available release versions. Choose one of them.

• All-in-one userscript
  • Large size, more than 220 kB
  • All resources built-in
  • Starts slower
• Cdn userscript
  • Smaller, less than 80 kB
  • Uses google font cdn
  • Starts faster

Install browser addon

Download one of userscript addons for your browser.

• Tampermonkey
  • Home page
  • Chrome
  • Firefox
  • Microsoft Edge
  • Opera
  • Safari
• Violentmonkey
  • Home page
  • Chrome
  • Firefox
  • Maxthon
  • Microsoft Edge
• Greasemonkey
  • Home page
  • Firefox
• Userscripts
  • Home page
  • Safari

Install application

To install it you should:

1. Open link with one of the releases.
   • All-in-one userscript
   • Cdn userscript
2. See userscript addon special window with buttons install and cancel.
3. Press install.
4. Now everything is ready to use.
   Open site Anon.fm, and you will see a new player at the top of the screen.

After install

If you do not want to receive updates for script you should disable auto-update feature for userscript in your browser addon.

Development

Build project by yourself

To build project by yourself you have to:

1. Install tools
   • git
   • node
   • npm
   • yarn
   • terminal or console
2. Get repository form gitlab by calling git clone or use your preferred text editor, ide, or git tool.
   Choose one of two sources.
   • https with command git clone https://gitlab.com/vitoyucepi/audio-player.git
   • ssh with command git clone git@gitlab.com:vitoyucepi/audio-player.git
3. Install dependencies.
   It will take about 1-5 minutes and about 700mb of free disk space.
   yarn install --pure-lockfile --non-interactive
4. Build project. It will take about a minute.
   yarn build

Now your own build versions is ready.
Directories that contain release files:

• Deploy version: ./@npm/audioplayer-deploy/dist/
• All-in-one userscript version: ./@npm/audioplayer-userscript/dist/userscript/
• Cdn userscript version: ./@npm/audioplayer-userscript/dist/userscript-cdn/

Use gitpod online IDE with gitlab integration

1. Open project gitpod page.
2. Login with your gitlab account.
3. Wait till your workspace is ready.
4. Your online IDE is ready to go.
   By default, development environment will run.

Project dependencies

1. Host and delivery

   • Gitlab
   • Npm
   • Unpkg
   • Google fonts

2. Build and release

   • Nodejs
   • Yarn
   • Lerna

3. Compile

   • Webpack
   • Typescript

4. Frontend components

   • Preact
   • React-icons
   • Storeon
   • Sass-mq
   • Neverthrow
   • Openfonts
   • Normalize.css

License

HTML5 Audio Player for anon.fm web site
Copyright (C) 2021 Vitoyucepi

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.