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 install

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

or by using yarn

yarn 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

linting setup notes

> we plan to deprecate TSLint and focus our efforts instead on improving ESLint’s TypeScript support  

Their blog post announcing that TSLint will be deprecated in 2019 and you should switch to ESLint when TSLint is officially deprecated

TSlint will be deprecated github ticket

features

utilities.log

Colored console log messages for the browser and / or nodejs 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 utilities.logSpecial = true

logging in a file (server) If want every message to logged in file, then enable logSpecial (currently only winston is supported) utilities.logSpecial = true

logging in a file (server) but not in the console 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"

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

universal nodejs harvester

start

To start the harvester type:

node start

TODOs

check out the documentation/TODO.md file

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

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

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

Waveform created using the visualizer with data using the "chrisweb waveform data generator"

examples

Check out the examples directory

getting started

installing

• First, start by installing nodejs (http://nodejs.org/) (which includes npm)
• You will also have to install git (http://git-scm.com/download)
• Use git to clone this project locally
• Use your command line tool and go to the root of this project (type: cd /LOCALPROJECTPATH)
• TODO

TODOs

• convert code to typescript
• finish "installing guide" of the readme
• add eslint package, setup linting, add script to package json, add linting guide to readme
• put latest version on npmjs.com

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

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, SOUNDMODEAUDIO which uses the audio element to load sounds via the audio element and SOUNDMODEFETCH to load sounds via the web audio API. Here are some of the differences between the two:

the web audio API (SOUNDMODEFETCH)

• 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 (SOUNDMODEAUDIO)

• 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 SOUND_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 SOUND_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 SOUNDMODEFETCH. 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 SOUNDMODEAUDIO 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: ...

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

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 hitting running 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