Arduino NodeJS Music Quiz Game

🚨⚠️ project is being re-written lot of things might currently be broken

A music quiz game using an arduino to record buttons input and nodejs as gameserver

musicquizgame.com

say hello at musicquizgame@gmail.com

Arduino buttons breadboard design

start development

install git

if you haven't already installed git, do this first

http://git-scm.com/download

project checkout

if you are reading this you maybe already have a local copy of the project, if not then you can should use git to clone the latest master branch

to do this you need open your command line tool and use the following command to clone (http://git-scm.com/docs/git-clone) this project into one of your directories (PROJECTDIRECTORYPATH)

cd /PROJECT_DIRECTORY_PATH

now clone the project into that directory

git@github.com:chrisweb/nodejs-arduino-game.git

if you are on windows you can also use the github desktop (https://desktop.github.com/) or if your use visual studio as IDE you can use the github for visual studio extension (https://visualstudio.github.com/)

install github desktop or the visual studio extension, then go to the github open the project main page and click the green "clone or download" button

install Nodejs

if you haven't done this already, install nodejs from https://nodejs.org (which includes npm, the nodejs package manager)

update npm

to ensure you have the latest version of npm, update npm (https://docs.npmjs.com/getting-started/installing-node), open your command line tool and use the following command

npm install npm@latest -g

to check if you have the latest version type

npm -v

what the latest npm version is can be seen in their package.json https://github.com/npm/npm/blob/latest/package.json

~~install yarn~~

~~get yarn https://yarnpkg.com/~~

~~or check if it the latest version is already installed~~

!!! we postponed using yarn (use npm instead, see below), because there is a bug when checking out @types packages:

https://github.com/yarnpkg/yarn/issues/825
https://github.com/yarnpkg/yarn/issues/656

yarn --version

open project directory

go into the project directoy if you haven't already and then into the quizz-game directory

cd /PROJECT_DIRECTORY_PATH/quizz-game

⚠️ Serialport and node-gyp troubleshooting

!!! if you need to compile node-gyp, it is probably because you use the latest nodejs version, if you use the LTS version of nodejs the chance is high you won't have any trouble with node-gyp, so if troubleshooting still fails or takes too much time you might consider just switching to the nodejs LTS version and you will be able to instsall Serialport using a pre built node-gyp without trouble

Serialport is a nodejs addon that needs to get compiled

For the compilation node-gyp is being used

ON WINDOWS: If you don't have Python and Visual Studio installed on windows, node-gyp will fail and hence you won't be able to install the Serialport addon

The node-gyp README recommends to run the following command in a Powershell instance that you have to run as an Administrator to install the required tools

npm install --global --production windows-build-tools

After this installing the dependencies should work, if it doesn't please check out the nodejs documentation about compiling addons and if it still doen't work open a ticket

ON LINUX & MAC: For other operating systems check out the node-gyp README

~~install the development dependencies using yarn~~

~~use yarn to fetch all the dependencies and put them into the node_modules directory~~

yarn install

!!! we postponed using yarn (use npm instead, see below), because there is a bug when checking out @types packages:

https://github.com/yarnpkg/yarn/issues/825
https://github.com/yarnpkg/yarn/issues/656

install the development dependencies using npm

use npm to fetch all the dependencies

npm install

This will fetch all the dependencies from https://www.npmjs.org/ that are listed in the project package.json and put them into a directory called node_modules

!!! If you want to install the dependencies from within a Virtual Machine with a Linux operating system, but your shared folder is in windows then user "npm install --no-bin-link" (as windows does not support symlinks)

install gulp-cli globally

npm install gulp-cli -g

install sass and ruby

download and install ruby:
http://rubyinstaller.org/downloads/

!!! if on windows: while installing ruby, check the box "add ruby to the windows path"

now install sass:

gem install sass

and / or to check if sass is installed, type:

sass -v

add new dependencies (node_modules)

first to check the available package versions use

npm view <package_name> versions

choose the latest version (this is for a prototype latest is ok) and install it

if it's a dependency needed by the project to work, we use save so that it also gets added to the dependencies property of our package.json

use the @ after the package name, to define the version you want to install

npm install <package_name>@<version> --save

if it's a dependency only used during development use "--save-dev" so that it gets added to the devDependencies property of our package.json

npm install <package_name>@<version> --save-dev

create a configuration file

open the server directory and copy the file configuration_example.ts, then rename it to configuration.ts

edit the configuration file and add your own values

the deezerProfileId is the id of the user profile you want the playlists to be fetched from by default (it can be any existing deezer account, it just needs to have some public playlists)

if you don't have a deezer account yet, create one and add some playlists (at least one), then puts it's ID in the configuration file

build the project

to build the project (create js files from ts source files, copies files, ...), type

gulp build

rebuild in realtime

while developing I recommend you enable gulp watch to ensure typescript and sass files get re-compiled on each time you save

gulp watch

start the server

node ./build/server

build the docs (project website on github pages)

to build the project website (on github pages), type

gulp build-docs

Initial project setup

check out the PROJECT_SETUP.md file

Licenses

Source code licensed under MIT

Logo, design, project name, domain name copyright (c) chris weber 2017

Design

Designed by the awesome people at Tubik Studio

chris.lu

https://chris.lu

My personal development blog, using PHP and the Zend Framework 1 for the backend. The frontend uses the Twitter Bootstrap 3 and and jQuery Mobile 1.4.

In production the blog is hosted on NGINX with php-fpm and apc cache. The database is MongoDB.

This is not a Wordpress Blog with lots of features, it is an expirement with just enough features to host my own stuff online.

I have put it on GitHub because maybe some parts like my library, the layout helpers or my "modules structure" where each module has its own boostrap and configuration files may be helpfull for zf1 starters.

Install

Install the submodules with this command: git submodule foreach git pull

In "/application/configs/", rename the "application_default.ini" into "application.ini" and use your own values where needed

Do the same for each config.xml of each module in "/application/modules/MODULE_NAME/configs/"

If the Bootstrap failed to create the followind folders you may have to create them manually, create the folder "caches", "searchindexes" and "logs" in the "application" folder and in the "/public/" folder create an "upload" folder

Put a copy of the zend framework 1 into "/library/Zend/" (this repository got tested using zf1 1.12.3)

Check out the dev-vhost.txt file to setup an apache development vhost

To update the javascript packages check out the updating.txt file

MongoDB Backup

mongodump --out=/mongodb_backups/$(date +%Y-%m-%d)

TODO

• DONE: upgrade Twitter Bootstrap to version 3
• DONE: upgrade jQuery mobile to version 1.4
• DONE: responsive layout improvements, for example the main area is too small on tablets
• DONE: use Zend_Feed to read GitHub activity feed
• DONE: use GitHub API to retrieve repositories list from GitHub (with zend file cache)
• DONE: add zend file cache for GitHub feed in projects module
• DONE: rewrite of the bookmarks module that is useless as it is right now
• DONE: comments system for articles (remove disqus)
• form to allow visitors to suggest bookmarks, article topics and readinglist entries
• use Stackoverflow API to retrieve some public data (with zend file cache)
• gravatar for comments
• reduce header size for small resolutions especially if height is small

TODO (maybe):

• update / improve mongodb models
• improve tags system
• create about page
• add the option to switch to MariaDB
• upgrade to zf2 if I have some free time left in the future ;)

chrisweb utilities.js

Javascript utilities belt for very specific tasks.

main goal(s):

• console log wrapper for colored log messages
• utilities belt: javascript collection of useful functions that are useful for specific situations, so a lot more specific than underscore
• should work in the browser as well in nodejs

usage

@TODO

build

install the latest nodejs (if you haven't already) nodejs

install or update to the latest git version git scm downloads (During installation at the step "choosing the default editor used by Git", if like me you are using visual studio code you might want to chose the new option "use visual studio code as Git's default editor") (also if like me you are on windows, at the step "adjusting your PATH environment", ensure the second radio button option is selected "git from the line and also from 3rd-party software" to ensure git is added to the windows PATH, which will allow you to use git with any command line tool like windows powershell for example)

git clone this repository if you haven't already

open your favorite command line tool and go to the root directory of this repository

update npm to latest version

npm install npm@latest -g

install the dependencies

npm i

to lint the typescript files

npm run lint

run the tests

npm run test

to build the distributions (es6 module (esm.js) and the UMD version)

npm run build

development

in devlopment you can use watch to rebuild every time you edit a typescript file

npm run watch

you can also use watch for the test suite

npm run watch:test

contributing

Bug reports, tests, fixes, new features and all kind of comments / feedback are welcome 😃 Submit a feature request or bug issue

testing setup notes

I used the jest testing framework

I added the jest typescript types and the ts-jest package

installed dependencies:

npm install --save-dev jest @types/jest ts-jest

command to create a basic jest.config.js file:

npx ts-jest config:init yarn ts-jest config:init

If you use VSCode, consider using the vscode jest extension

Besides reading the official documentation, you can check out this quick introduction to jest blog post

features

utilities.log

Colored console log messages for the browser and / or nodejs

javascript utilities.log('foo', 'bar', 'fontColor:red', 'backgroundColor:blue');

Suppported colors

• red
• green
• yellow
• blue
• magenta
• cyan
• white
• black

logging in floating html div (client)

If you are on mobile device and wan't to show the messages in a floating div over the page then set logSpecial to true

javascript utilities.logSpecial = true

logging in a file (server)

If want every message to logged in file, then enable logSpecial (currently only winston is supported)

javascript utilities.logSpecial = true

logging in a file (server) but not in the console

javascript utilities.logSpecial = true utilities.logVerbose = false

removeElements

removes html elements from a sting (and their content) from strings set second parameter "removeTextBetweenTags" to false to keep the text between the opening and closing html tag

generateUUID

returns a universally unique identifier

filterAlphaNumericPlus

filters a string removes everything that is a not an alpha or numeric character and also optionally the characters that got specified as second argument

decodeUri

decode uri

encodeUri

encode uri

arrayRemove

remove an something at an unknown index from an array

capitaliseFirstLetter

capitalise first letter of a string

getUrlParameters

get url parameters

stringContains

does a string contain another string

getSubstringIndex

get the index of a substring in a string with optional nth time it occurs

isServer

does the script run on the server

isClient

does the script run in a client

replace placholder(s)

first parameter is a string and second parameter an object where the keys are the placeholder that need to get replaced and the value is the replacement (replacement can be a string or number)

remove the content between two "markers"

randomInteger

Input are two numbers, output is a random number that is between or equal the two input numbers

choice

Input is a sequence (an array) of items and the output one random item of the input

cordova_prototype

bautify me photo app (cordova prototype)

TODOS

• DONE: setup package json to retrieve dependencies (requirejs, twitter bootstrap, grunt, ...)
• DONE: edit config.xml and set default values
• DONE: add grunt file to project
• DONE: use grunt to copy vendor modules from node_modules to phonegaps www
• DONE: use grunt and jshint to lint javascript code
• DONE: setup sass and grunt watch to recreate css each time sass file gets edited
• DONE: set the canvas to full width and fulll height minus the space needed for the header and the footer of the app
• DONE: add the android platform to the project
• DONE: add the camera plugin to the project
• DONE: use camera plugin to take a photo
• DONE: create a black and white filter
• DONE: lock orientation to portrait in config.xml
• DONE: add the splashscreen plugin
• DONE: change the application icon
• DONE: save image to phone photo library
• DONE: add stickers to an image
• DONE: show message (green / red) after each action
• DONE: create the images needed by the splashscreen plugin
• button to share a photo on social networks
• load image from local device library to edit it
• use the google drive API to backup images on drive
• set the size of the canvas to the size of the image and change the canvas size using css, or the image will be small when it gets saved
• the stickers functionality needs some improvents, would be nice to let the user choose a sticker from a gallery and then let him position and resize it manually
• changing the filter should not reset the stickers
• add more funny filters and / or let the user create own filters

PLUGINS USED BY THE APP

• cordova-plugin-splashscreen
• cordova-plugin-whitelist
• cordova-plugin-file
• cordova-plugin-camera

RESOURCES

phonegap configuration file documentation: http://docs.phonegap.com/en/edge/configrefindex.md.html

camera plugin options: http://docs.phonegap.com/en/edge/cordovacameracamera.md.html

splashscreen plugin documentation: http://docs.phonegap.com/en/edge/cordovasplashscreensplashscreen.md.html

application icon documentation: http://docs.phonegap.com/en/edge/configrefimages.md.html

project setup

install io.js or node.js: https://iojs.org

install grunt and grunt cli globally: npm install grunt -g npm install grunt-cli -g

install ruby: on windows get the windows installer http://rubyinstaller.org/

install sass: gem install sass

install git: for example git for windows https://msysgit.github.io/

install java jdk 1.7.x: http://www.oracle.com/technetwork/java/javase/downloads/index.html

for windows: adndroid sdk requires java, so ensure you have a JAVAHOME environment variable set JAVAHOME should be something like C:\Program Files\Java\jdk1.7.0_79

install stand-alone SDK tools: https://developer.android.com/sdk/installing/index.html

install cordova: npm install cordova -g

checkout the project: https://github.com/chrisweb/cordova_prototype

open your console and go into the root directory of the project where the Gruntfile.js resides and install the dependencies: npm install

if you IDE requires the path of the android sdk set it to something similar to this, this example is for windows: C:\Users\USER_NAME\AppData\Local\Android\android-sdk\SDK Manager.exe

if you are on windows and want to debug an android nexus device then you will need to install the google usb driver: http://developer.android.com/sdk/win-usb.html

in this project the android platform has already been added, to add another platform, open your console and go into the app directory, then type the following command: cordova platform add PLATFORM_NAME

to test the app for android you need to setup the emulator, go into the android SDK folder and launch the AVD manager, then create a virtual device and start it: http://developer.android.com/tools/help/avd-manager.html

if you get this error message "SSL certificate problem: unable to get local issuer certificate" when building the app, when the plugins get retrieved then you probably use the following command to disable ssl checks in git: git config --global http.sslVerify false ! this is not safe, but I didnt find better solution yet, you can enable ssl checks after the checkout using this command: git config --global http.sslVerify true

if on device ready the camera plugin is undefined, re-install the plugins: cordova plugin remove cordova-plugin-camera cordova plugin add cordova-plugin-camera

if the app does not build correctly try to reinstall the platform and plugins: cordova platform remove android cordova platform add android

• cordova plugin remove cordova-plugin-splashscreen
• cordova plugin remove cordova-plugin-whitelist
• cordova plugin remove cordova-plugin-file
• cordova plugin remove cordova-plugin-camera
• cordova plugin add cordova-plugin-splashscreen
• cordova plugin add cordova-plugin-whitelist
• cordova plugin add cordova-plugin-file
• cordova plugin add cordova-plugin-camera

to test the app in the emulator use this command: cordova emulate android

deploay the app on a device for testing, execute this command: cordova run android --device

if you try to debug on two different computers but on the same device, you will get this error message while building "INSTALLFAILEDUPDATE_INCOMPATIBLE" on your device go to settings > apps and delete the app, then run the command again

to use the remote debugging of chrome: open chrome, go to more tools > inspect devices and there your device should show up, now click on inspect

keywords

• distort
• manipulate
• image
• effect
• canvas
• photo
• filter
• lens
• share
• selfie
• retouch
• transform
• face
• fun
• frame

                             
                       __  __           _      
    ____              |  \/  |         (_)     
   / __/_______  ___  | \  / |_   _ ___ _  ___   _______  _  _ ___ 
  / /_/ ___/ _ \/ _ \ | |\/| | | | / __| |/ __| |_  / _ \| \| | __|
 / __/ /  /  __/  __/ | |  | | |_| \__ \ | (__   / / (_) | .` | _| 
/_/ /_/   \___/\___/  |_|  |_|\__,_|___/_|\___| /___\___/|_|\_|___|

freeMusic.zone

goal

This project is "just" a prototype right now.

The goal of this project is to create a fun mobile / tablet / desktop free music app. For more details about the features check out the documentation/features document.

∧ ／￣ ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣\ |　web audio, music and sound experiments | ＼＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿/

Documentation (RTFM)

All the documentation can be found in the documentation directory.

Before you start coding

First read the "/documentation/development_setup.md" documentation to ensure everything is set up.

Read the documents before you start coding, especially the "/documentation/codestyleguide.md", "/documentation/sassstyleguide.md" and "/documentation/conventions.md" are important, so read them before you start.

Contributing

Contributors are welcome :).

If you want to contribute, first setup a development version of this app and read the "/documentation/contributing.md" guide. Then check out the "todos.md" document or the issues list on github (https://github.com/chrisweb/freeMusic.zone/issues) to find something you can add us with. Happy coding ;).

A list of contributors can be found here: https://github.com/chrisweb/freeMusic.zone/graphs/contributors.

Feedback and bug reports are welcome ;)

If you have feedback about something related to this project or found a bug please report it in the issues tracker: https://github.com/chrisweb/freeMusic.zone/issues

License

freeMusic.zone: MIT licensed, Copyright (C) 2013 Chris Weber

Online version: https://chris.lu/html5

This is a presentation of HTML5, but also other proposal that get often thrown in the HTML5 pot and a little CSS3 introduction

I was inspired by slides.html5rocks.com but wanted to do something slightly different

01.03.2014: updated using reveal.js https://github.com/hakimel/reveal.js

Editing the slides

If you want to edit the slides, follow these steps:

• Install nodejs

• Install Grunt

$ npm install -g grunt-cli

• Install dependencies

$ npm install

• Serve the presentation and monitor source files for changes

$ grunt serve

• Open http://localhost:8000 to view your presentation

You can change the port by using grunt serve --port 8001.

Happy Forking

myapp.dev

myapp.dev (a Zend Framework 1 Blog Tutorial)

This repository contains the source files for the article series "Zend Framework 1 Blog Tutorial" that can be found on my development blog: https://chris.lu/article/read/530a3136268c42ec098b4569

Hopefully easy to understand article series about creating a Zend Framework 1 app from scratch.

installation

To install the app:

• you need to checkout this repository
• add a "library" folder in myapp/
• download a copy of the Zend Framework 1, extract it and then copy the "Zend" folder into myapp/library/

vhost file

This repository contains a vhost file example that shows you how to setup the apache2 vhost for your app.

hosts file

The hosts file in the repository is an example of a hosts file for windows to create a fake domain name for the development of your app.

nodejsrestapi_example

An example of a simple nodejs rest api

ribs.js 0.1.0

This project is not ready for use in production. It's still under heavy development. I wrote this for another project I work on right now, but its still far from being stable. Testing are fixes and comments are welcome.

typescript build command

tsc --target ES5 --module umd --outDir ../build --sourceMap ribs.ts collection.ts container.ts controller.ts eventsManager.ts model.ts router.ts view.ts viewHelper.ts

main goal(s): * extend backbone view to automate some tasks * a must have is that views code should not contain any html markup, every bit of html should be in the template so that designers only have to touch that file * new collection view to build lists and when destroyed auto close children * new controller * views loader based on requirejs * collections batch save for all models at once

future: * use promises https://github.com/jakearchibald/es6-promise * use shadow dom for views (polymer shadow dom polyfill) https://github.com/polymer/ShadowDOM

ribsjs documentation

ribsjs views

onInitialize hook

• if you want to do stuff during initialization of the view
• don't try to append html to this.$el during onIntialize as it would get overwriten, instead use onRender

onRender hook

• if you want to add programmatically stuff to the view during the rendering process use onRender

for more check out the documentation.md

universal-nodejs-harvester

description

The goal of this project is to create universal nodejs harvester, that has a visual interface that lets a user select portions of website and then assign those portions to columns of an excell file or a database. Then the harvester would on a regular basis visit the website, scrap by the rules that got defined and save the data somewhere. This way without programming anyone could scrap content from any source to use it for what ever needs they have.

But for now only a part of this vision has been coded, which is the harvester itself. This tool visits a webpage, grabs the entire html code, parses it based on hardcoded rules (that you can adapt manually to your own needs, see the next section "examples" for an explanation) and then saves the extracted data into a csv file.

examples

To check out the examples open the index.ts file located in src

The first example of this project is a web scraper / content harvester that reads the content of the hacker news homepage and saves the result into a csv file, you can modify that code to start crawling any other website. All you need to do is set the correct URL and then you also need to adapt the dom selectors to extract the data you need from the scrapped html document. After extracting the information you seek, you finally need to adapt the columns of the csv output file to match your content or even replace the csv file with any database storage you prefer.

The second example does a similar job, except that instead of crwaling a webpage on the web it loads a static html file from a local folder on your computer, the next two steps are similar to what is done in the first example.

The third example is a wikipedia.org list of countries by population (united nations data source) scrapper which harvests the html document content but will also download each of the country flags images. The script will create a csv file with the names of all the countries in the world and will also download each flag image from wikipedia, it downloads the images at an interval of 1 to 5 seconds. The csv file can be easily converted to a google sheet which will then dispay the flags images using a cell formula, for each country row.

install

To install the (npm) dependencies:

shell npm i

lint

To lint:

shell npm run lint

build

To do a build (compile typescript):

shell npm run build

start

To start the harvester type:

shell npm run start

TODOs

check out the TODO.md file

controversy

I'm aware tools like this one are always surrounded by some sort of controversy. Yes there are a lot of dubious usage cases for such a tool, but there are also lots of valid and legal reasons to want such a tool, for example I created this tool for my personal needs, without bad intentions and not to do something illegal. I wanted to scrap information from my personal account on a social platform (that did not have an API at that time) and display the result on my own blog. This allowed me to update my data in one place and have it automatically displayed in several other places without me having to post the content manually multiple times.

waveform-data-generator

Generates waveform data (peaks) that can then get visualized using: https://github.com/chrisweb/waveform-visualizer

Waveform created using the visualizer with data from waveform data generator

Getting started

• Install git and then do a local clone of this project
• First, start by installing nodejs (http://nodejs.org/) (which includes npm) to run the server or use the cli tool
• update npm to ensure you have the latest version installed npm i -g npm@latest
• Now install ffmeg package based on your operating system (https://www.ffmpeg.org/download.html) (and if you develop in windows add it to your path: http://www.wikihow.com/Install-FFmpeg-on-Windows)
• Use your command line tool and go to the root of this project (type: cd /LOCALPROJECTPATH)
• type: npm install, to install the required nodejs modules (dependencies)

Launch the server

• Use your command line tool and go to the root of this project (type: cd /LOCALPROJECTPATH)
• To lauch the server type: node server
• Open your browser and type the following address: 127.0.0.1:35000

Using the command line tool

• Use your command line tool and go to the root of this project (type: cd /LOCALPROJECTPATH)
• Type: node cli PARAMETER1 PARAMETER2 (...)
• For example: node cli ./downloads 1100511 ogg 200 local json false

Cli Options (Parameters)

• The first parameter "./downloads" is the repository where you want the audio files to get stored
• The second parameter "1100511" is the filename of the track (in my example the filename is the track ID)
• The third parameter "ogg" is the audio file format (also file exntension) of the track (ogg / mp3)
• The fourth parameter "200" is the amount of peaks you want to get
• The fifth parameter "local" tells the script if the file is already on your local machine, use "jamendo" to download the file from jamendo and store it the downloads directory
• The sixth parameter "json" is the type of output you want, the peaks can get outputted in either json or as a string
• The seventh parameter tells the script if it should use ffprobe to detect the track format (number of channels, the sampling frequency, ...) or use default values

Using the web interface

• Use the following url to fetch a song from a remote source (currently only support for jamendo, fork me of you want to add another serive) and get a json containing the peaks http://127.0.0.1:35000/getwavedata?service=jamendo&trackId=1321406

web interface Options (Parameters)

• trackId: the ID of a track [required / numeric track ID]
• trackFormat: the audio file format (file exntension) of the track (ogg or mp3) [default ogg]
• peaksAmount: the amount of peaks you want to get [default 200]
• method: the http request method to get the remote file [default GET]
• serverDirectory: the repository where you want the audio files to get stored on the server [default ./downloads]
• service: the audio file provider you want to get the track from (you can use 'local' if the file is already in your server directory) [default jamendo]
• detectFormat: tells the script if it should use ffprobe to detect the track format (number of channels, the sampling frequency, ...) or use default values (true or false) [default false]

🚨 Out of memory:

Error "FATAL ERROR: JS Allocation failed - process out of memory"

If the file you want to parse is too big, try increasing the memory limit of your node process, like this:

node --max-old-space-size=1900 cli ./downloads 1100511 ogg 200 local json false

If you still run out of memory try to reduce the sample rate by passing custom values as seventh parameter, for example if the song sample rate is 44100 but runs out of memory, then try again with 22050, like this:

node --max-old-space-size=1900 cli ./downloads 1100511 ogg 200 local json sr=22050

TODOs

• fix memory problems for big audio files
• Create a client side waveform data generator using the web audio API (http://www.w3.org/TR/webaudio/)

waveform-visualizer

Visualizes waveform data (peaks), for example the ones that got generated using: https://github.com/chrisweb/waveform-data-generator

Waveform created using data that got generated using the waveform data generator

examples

Check out the simple waveform example

license

This project is licensed under the MIT License - see the LICENSE.md file for details

web audio API player

About this project

🎶 An opensource javascript (typescript) audio player for the browser, built using the Web Audio API with support for HTML5 audio elements

this player can be added to any javascript project and extended in many ways, it is not bound to a specific UI, this player is just a core that can be used to create any kind of player you can imagine and even be used to play sound in video games or for any other sound / song playing needs you may have

TODO: add screenshot here showing the "simple example" UI, explain that this is just an example of an UI, you can bind your own custom UI to this player and use all or just some of it's features

😔 there is almost no documentation yet (there is some, see next section below), to learn how to use this library I recommend you check out the source code of the simple player example to get started

Want to help improve the documentation or contribute to this project by improving and fixing it, then first check out the TODOs section below, maybe there is something in the list you want to help with. Any contribution, even things not listed on the TODO list are of course welcome. To get started check out the section "contributing" section below.

installation

web audio API player is published to the npm registry so you can install it with either npm or yarn

npm install web-audio-api-player

documentation

This player has two modes, PLAYERMODEAUDIO which uses the audio element to load sounds via the audio element and PLAYERMODEAJAX to load sounds via the web audio API. Here are some of the differences between the two:

the web audio API (PLAYERMODEAJAX)

• No support for streaming
• Files get loaded using fetch, the loading progress is in percent and it is a single value between 0 and 100 percent loaded
• A song has to be fully fetched before it can be turned into a buffer and hence before the playback can start

For a more complete list of features, check out the w3c web audio API features list in their candidate recommendation document

the audio element (PLAYERMODEAUDIO)

• Support for streaming
• Files get loaded using the audio element, the loading progress is not just a single value, it can be split into multiple parts (time ranges), so for example the start of a song from 0 to 10 percent got loaded, then there is a blank of not yet loaded data and then also the part from 35 to 60 percent has been loaded
• A song can be played as soon as a big enough portion of the sound has been loaded (what "big enough" means, is that the browser calculates how much of the sounds needs to get loaded to be able to start playing it and continue loading (streaming) what is left without having to pause the sound at some time during the play process until the end of the playback)

features clarification

You might have read (like I did) a lot of outdated web audio articles which stated the web audio element lacks a lot of features the web audio API has and that hence it is not suited to create complex audio software or for example be used in games where you might want to add effects and filters to sounds.

TLDR; This is not true anymore and especially not true for this library. Yes the audio element if used as a standalone lacks a lot of features. But this library does combine the web audio element with the web audio API.

If you use this library, the difference is only how the sound (song) gets loaded (see list of differences above). If using fetch the source is a Buffer and if using the "HTML audio element" well the source is a media element. Everything that happens after is the same. This is why you can change in the player options the PLAYER_MODE, to either load the sound using fetch or load / stream it using the audio element. But this influences only how the sound get loaded (fetched), if loaded via audio element, we use the web audio API createMediaElementSource method of the audiocontext to pass it to the audiocontext of the web audio API. After feeding the web audio API with the input from the web audio element, the playback and what you do with it is being handled by the web audio API.

so which PLAYER_MODE should I use

It depends on what you intend to build.

If you build a game where you have a lot (of small sounds) that get (pre-)loaded and maybe cached but played later at some time after they finished loading, use PLAYERMODEAJAX. It's progress is easier to understand, because when the loading progress of the sound has reached 100% you know it can be played. To display the loading progress a simple HTML progress element is enough.

If you build a music player, use the PLAYERMODEAUDIO as you might to want to start playing the sound (song) as quickly as possible and don't care if it has fully loaded yet as long as the part that has been loaded is enough to play the song until the end (while the rest of it is being streamed from the server in the background). To display the time range(s) that have been loaded you could for example use a 2D canvas element.

advanced usage

You can create and then inject your own AudioContext

You can inject your own, if you want to reuse an existing one your app already created:

TODO: add example

You can also take the one created by the library and alter it the way you want:

TODO: add example

You can create and then inject your own AudioGraph (audio routing graph)

This is especially useful if you want to add your own nodes to the AudioGraph (audio routing graph). For example you may want to add an AnalyserNode or a pannerNode, delayNode or any other node that is available in the web audio API.

W3C web audio API

W3C Candidate Recommendation, 18 September 2018

Editor’s Draft, 8 August 2019

MDN Web Audio API section

Support tables for audio features, caniuse: web audio API / audio element / formats ...

development: build

install the latest nodejs (if you haven't already) nodejs

install or update to the latest git version git scm downloads (During installation at the step "choosing the default editor used by Git", if like me you are using visual studio code you might want to chose the new option "use visual studio code as Git's default editor") (also if like me you are on windows, at the step "adjusting your PATH environment", ensure the second radio button option is selected "git from the line and also from 3rd-party software" to ensure git is added to the windows PATH, which will allow you to use git with any command line tool like windows powershell for example)

git clone this repository to get a local copy

git clone git@github.com:chrisweb/web-audio-api-player.git

open your favorite command line tool and go to the root directory of this repository

update npm to latest version

npm install npm@latest -g

install the dependencies

npm i

to build the distributions

• es6 module = /dist/index.js
• UMD version = /dist/index.umd.js

npm run build

in development you can use watch to rebuild every time you edit a typescript file

development: watch

npm run watch

development: linting

to lint the typescript files

npm run lint

contributing

you should first open a ticket and explain what fix or improvement you want to provide on the github issues page of this project (remember the github ticket number you will need it for the commit message later on)

go the github page of this project and hit the fork button

follow the instructions in the previous section "development: build", but instead of cloning this projects repository, clone your own fork of the project

git clone git@github.com:YOUR_USERNAME/web-audio-api-player.git

when you are done coding, commit your local changes (if your commit is related to a ticket start your commit message with the "#TICKER_NUMBER")

git commit -m "#TICKER_NUMBER commit message"

now open your forks github URL in your browser and hit the pull request button

examples

the best way to get started is to check out the examples folder, start with simple player example

note to self: publish package on npmjs.com

login to npmjs.com

npm login

!!! before using the next the command ensure the version of your package in the package.json has been updated

publish a new version on npmjs

npm publish

notes about problems I encountered during development

web audio api typings notes

As of now (25.05.2019) the web audio api typings seems to be included in lib.d.ts, so removing them from package.json:

json "dependencies": { "@types/webaudioapi": "0.0.27" },

Unfortunately the defined window does not have AudioContext:
check out [open] github ticket (as of 06/2019)
the current dom.d.ts on github

TODOs (help wanted 😊)

• create a react example
• create a vue.js example
• create an example using the fileReader

javascript var fileInput = document.querySelector('input[type="file"]'); fileInput.addEventListener('change', function(event) { var reader = new FileReader(); reader.onload = function(event) { playerCore._decodeSound(this.result); }; reader.readAsArrayBuffer(this.files[0]); }, false);

• completely rewrite the sources system, where you can define multiple variants of a sound but with different codecs, app needs to check which codecs are supported by the device and choose one, use should be able to define which codec is preferred if playback support for multiple codecs is available
• implement audiocontext to close to release memory?
• feature to use the browser notification system to alert which song is being played
• instead of the ArrayBuffer use the MediaElementAudioSourceNode, make it optional to still use the ArrayBuffer
• preload AudioBuffers in indexeddb (first song, next song, current song if loop or previous is triggered ...), let the developer set the amount of preloaded AudioBuffers, remove from "cache" by least used and by date when "cache" is full
• cache songs for offline mode? indexeddb is not very big (filesystem?), check if doable because saving a playlist of songs might exhaust the free space
• some methods return a promise others don't, use promises for all to make it more consistent?
• write a documentation
• make a list of all possible errors (set a distinct code for each error)
• add a contribution guide
• write tests!!! (goal 100% coverage), add tests coverage badge
• abort the loading of the sound if the user clicks play and then pause (or stop / next / previous) before the end of the buffering process
• replace XMLHttpRequest with fetch?
• allow cross fading songs "on end" if it's the next song in a playlist (or just fade out / fade in)
• currently the "find song in queue" can't retrieve songs by queue index, is this useful anyway?
• use suspend and resume if for some time no sound was played? ... to free device resources. As suspend returns a promise, does this mean suspending and resuming takes time? if so how much time does it take, based on that information we can decide after how much time it makes sense to suspend the ctx to save device resources
• use the requestAnimation frame or the requestidlecallback instead of setInterval for playing progress callback?
• use web workers, especially for the decoding of the ArrayBuffer into an AudioBuffer, to not block the main thread while decoding?
• add shuffle mode
• add a loop song and loop queue mode (https://webaudio.github.io/web-audio-api/#looping-AudioBufferSourceNode)
• handle all error cases that are still unhandled
• add support for more codecs (flac, wav, ogg vorbis, opus, aac): also check the available codecs and defined sources, play the first one that has matches and available codec, let user define order of preferred codecs for playback
• add saucelabs browser testing and their badge browser compatibility table badge in readme
• add travis continuous integration and badge
• add improve UI style and then add a screenshot to readme of example
• add live demo (via github pages)
• for position and volume, allow to use a percentage or a value
• add hooks to the sound object for all the native source node events AudioBufferSourceNode
• add (stereo) panning

DONE

• use gulp gulp and some gulp plugins to create a clean build
• create an XMLHttpRequest library class to fetch the ArrayBuffer
• create an audio library class to create the context and decode the ArrayBuffer
• create a custom error class with message but also a numeric code
• let the user add a sound with an already fetched ArrayBuffer or even with an already decoded AudioBuffer
• create a simple example with a vanilla JS UI
• add a sounds queue manager
• add "play" sound
• add "pause" and "stop"
• add "next" and "previous"
• add set / get volume and mute
• add a loading progress callback
• add a playing progress callback
• add an onEnded callback
• play next song onEnded, add option to enable or disable automatic play next onEnded
• add change position method
• add loop queue option
• make the core player options object optional when initializing a new player
• let the user modify the audio graph, for example by adding / removíng nodes like a filter node, a panner node ...
• replace gulp with rollup as new module bundler
• use pkg.module to distribute a UMD as well as an "ES6 modules" version
• rewrite the simple example with vanilla js instead of jquery
• put the web audio API player on npm and add npm version badge / license badge / ... shields.io
• implement suspend and resume: ctx.suspend() and resume
• add an option that uses the visibility API to automatically mute and unmute a sound when the visibility changes
• rewrite how the audiocontext is created, for browser that enforce that a user interaction has taken place before a context can be running
• add option to persist the user volume choice using the localstorage
• switch from tslint to eslint with typescript-eslint plugin / parser: TSlint will be deprecated github ticket, read their blog post and then switch to ESLint

License

MIT

About:

Zend Framework 1 OAuth 2 Library

version 1.1.2

Examples:

Zend Framework 1 OAuth 2 examples.

Facebook Open Graph API OAuth 2

1) Add the latest "Zend" Framework linrary and the "Chrisweb" library to the library directory

2) Setup an Apache vhost for the example:

apache vhost.conf

```

ServerName www.facebookopengraphoauth2.test
DocumentRoot /path/to/examples/FacebookOpenGraphOAuth2/public
ErrorLog "logs/facebookopengraphoauth2-error.log"
CustomLog "logs/facebookopengraphoauth2-access.log" combined
SetEnv APPLICATION_ENV "development"

<Directory /path/to/examples/FacebookOpenGraphOAuth2/public>
    DirectoryIndex index.php
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

```

3) (optional) Update your hosts file:

127.0.0.1 www.facebookopengraphoauth2.test

3.1) or just use the localhost IP to access the example(s)

http://127.0.0.1

4) Create a Facebook API account at https://developers.facebook.com/apps

Don't forget to set the go to "Settings" and set the correct "App Domains" (for example www.facebookopengraphoauth2.test) and also set the "Website / Site Url" (for example www.facebookopengraphoauth2.test)

5) Finally go into "/examples/FacebookOpenGraphOAuth2/application/configs/" and rename the file "facebookapiEXAMPLE.ini" to "facebook_api.ini" and add your own values where needed

5.1) Or if you prefer you can also create a new configuration file named "facebook_api.ini" in "/examples/FacebookOpenGraphOAuth2/application/configs/" and add the following values:

``` ; documentation: https://developers.facebook.com/docs/facebook-login

; facebook OAuth api configuration dialogEndpoint = https://www.facebook.com oauthEndpoint = https://graph.facebook.com clientId = 000000000000000000 ; change this with own values: clientId => Facebook App ID clientSecret = 000000000000000000000000000000 ; change this with own values: clientSecret => Facebook App Secret callbackUrl = http://www.facebookopengraphoauth2.test/facebookcallback responseType = code ; or token, none, signedrequest oauthDialogUri = /dialog/oauth accessTokenUri = /oauth/accesstoken stateSecret = SOME_SECRET ; change this with own values, change the secret every time you think it could have been compromised, it is used to ensure the OAuth requests really come from your app ; permissions https://developers.facebook.com/docs/facebook-login/permissions requestedRights = email ```

Google+ API OAuth 2

1) Add the latest Zend Framework and the Chrisweb library to the library directory.

2) Setup an Apache vhost for the example:

apache vhost.conf

```

ServerName www.googleplusoauth2.test
DocumentRoot /path/to/examples/GooglePlusOAuth2/public
ErrorLog "logs/googleplusoauth2-error.log"
CustomLog "logs/googleplusoauth2-access.log" combined
SetEnv APPLICATION_ENV "development"

<Directory /path/to/examples/GooglePlusOAuth2/public>
    DirectoryIndex index.php
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

```

3) (optional) Update your hosts file:

127.0.0.1 www.googleplusoauth2.test

3.1) or just use the localhost IP to access the example(s)

http://127.0.0.1

4) Create a Google+ API account at https://console.developers.google.com

5) Finally go into "/examples/GooglePlusOAuth2/application/configs/" and rename the file "googleplusapiEXAMPLE.ini" to "googleplus_api.ini" and add your own values where needed

5.1) Or if you prefer you can also create a new configuration file named "googleplusapi.ini" in "/examples/GooglePlusOAuth2/application/configs/" and add the following values:

``` ; documentation: https://developers.google.com/+/web/api/rest/oauth

; google+ api configuration dialogEndpoint = https://accounts.google.com/o/oauth2 oauthEndpoint = https://accounts.google.com/o/oauth2 clientId = 0000000000000000.apps.googleusercontent.com ; change this with own values clientSecret = 00000000000000000000000000000 ; change this with own values responseType = code ; https://developers.google.com/identity/protocols/OpenIDConnect#responsetypeparameter callbackUrl = http://www.googleplusoauth2.test/googlepluscallback secretType = immediate = oauthDialogUri = /auth accessTokenUri = /token stateSecret = SOME_SECRET ; change this with own values, change the secret every time you think it could have been compromised, it is used to ensure the OAuth requests really come from your app ; google+ scopes https://developers.google.com/+/web/api/rest/oauth#authorization-scopes requestedRights = https://www.googleapis.com/auth/plus.login,https://www.googleapis.com/auth/plus.me,https://www.googleapis.com/auth/userinfo.email ```

Jamendo API OAuth 2

1) Add the latest Zend Framework and the Chrisweb library to the library directory.

2) Setup an Apache vhost for the example:

apache vhost.conf

```

ServerName www.jamendoapioauth2.test
DocumentRoot /path/to/examples/JamendoApiOAuth2/public
ErrorLog "logs/jamendoapioauth2-error.log"
CustomLog "logs/jamendoapioauth2-access.log" combined
SetEnv APPLICATION_ENV "development"

<Directory /path/to/examples/JamendoApiOAuth2/public>
    DirectoryIndex index.php
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

```

3) (optional) Update your hosts file:

127.0.0.1 www.jamendoapioauth2.test

3.1) or just use the localhost IP to access the example(s)

http://127.0.0.1

4) Create a Jamendi API account at https://developer.jamendo.com/v3.0

5) Finally go into "/examples/JamendoApiOAuth2/application/configs/" and rename the file "jamendoapiEXAMPLE.ini" to "jamendo_api.ini" and add your own values where needed

5.1) Or if you prefer you can also create a new configuration file named "jamendo_api.ini" in "/examples/JamendoApiOAuth2/application/configs/" and add the following values:

``` ; documentation: https://developer.jamendo.com/v3.0/authentication#oauth2-authorize-request

; jamendo api configuration dialogEndpoint = https://api.jamendo.com/v3.0 oauthEndpoint = https://api.jamendo.com/v3.0 clientId = 0000000000 ; change this with own values clientSecret = 0000000000000000000000000000 ; change this with own values callbackUrl = http://www.jamendoapioauth2.test/jamendocallback oauthDialogUri = /oauth/authorize accessTokenUri = /oauth/grant stateSecret = SOMESECRET ; change this with own values, change the secret every time you think it could have been compromised, it is used to ensure the OAuth requests really come from your app grantType = authorizationcode requestedRights = music ; = scope responseType = code ; = response_type ```

OAuth 2.0 protocol specification:

http://oauth.net/2/

Zend-Framework-1-Service-GitHub

Very simple Zend Framework 1 Service for GitHub API v3

Usage:

IndexController.php

public function indexAction()
{

    $bootstrap = $this->getInvokeArg('bootstrap');
    $filescache = $bootstrap->getResource('filescache');

    $cachedResults = $filescache->load('github_my_projects');

    if (!$cachedResults) {

        $githubService = new Chrisweb_Service_GitHub();

        $githubService->setPath('/users/chrisweb/repos');

        try {
            $githubResponse = $githubService->query();
        } catch (Exception $exception) {
            $githubResponse = '';
        }

        $filescache->save($githubResponse, 'github_my_projects');

        $this->view->githubResults = $githubResponse;

    } else {

        $this->view->githubResults = $cachedResults;

    }

}

Bootstrap.php

protected function _initFilesCache()
{

    $filesCacheDirectory = APPLICATION_PATH.'/caches';

    if (!is_dir($filesCacheDirectory)) @mkdir($filesCacheDirectory, 0755);

    $cacheFrontendAdapter = $this->configuration->files->cache->frontend->adapter;
    $cacheBackendAdapter = $this->configuration->files->cache->backend->adapter;
    $filesCacheLifetime = $this->configuration->files->cache->lifetime;

    $filesCacheOptions = array(
        'frontend' => array(
            'automatic_serialization' => true,
            'lifetime' => $filesCacheLifetime
        ),
        'backend' => array(
            'cache_dir' => $filesCacheDirectory
        )
    );

    $this->filesCache = Zend_Cache::factory($cacheFrontendAdapter, $cacheBackendAdapter, $filesCacheOptions['frontend'], $filesCacheOptions['backend']);

    return $this->filesCache;

}

An authentification (Zend_Auth) Adapter for use with a MongoDB (NoSQL) Database.

Here is an example howto use the adapter (it's very similar to how you use the mysql adapter), some methods have slightly different names:

# AuthController.php

public function loginAction() {

    $form = new User_Form_LoginForm();

    if ($this->_request->isPost()) {

        $formData = $this->_request->getPost();

        if ($form->isValid($formData)) {

            $formData = $form->getValues();

            $userCollection = $mongoConnection->selectCollection('user');

            $userConfiguration = Zend_Registry::get('UserConfiguration');

            // create authAdapter instance
            $authAdapter = new Chris_Auth_Adapter_MongoDB($userCollection);
            $authAdapter    ->setIdentityKey('username');
            $authAdapter    ->setCredentialKey('password');
            $authAdapter    ->setIdentity($formData['username']);
            $authAdapter    ->setCredential($formData['password']);
            $authAdapter    ->setSalt($userConfiguration->authentification->password->salt);

            $result = $auth->authenticate($authAdapter);

            if ($result->isValid()) {

                $data = $authAdapter->getResultObject(null, 'password');

                $auth->getStorage()->write($data);

            } else {

                // login failed

            }

        } else {

            // form data aint valid

        }

    } else {

        $this->view->form = $form;

    }

}

TODO:

Redo the credential treatement part. Right know it's hardcoded and does only check if a salt was provided. Maybe could allow use to choose between md5 with salt and crypt, with a preference for crypt.

Feedback is welcome ;) Use the Github Issues system or visite me @ http://www.chris.lu