vraudioplayer
v0.14.1
Published
audio player interface for web VR projects made by Patrice-Morgan Ongoly for the House of Venus
Downloads
26
Readme
VRAudioPlayer
for kiesse and melissa
an audio player for web VR experiences and distributed applications
The VRAudioPlayer generates an audio player that users can experience in virtual reality through a web browser on most mobile, laptop, desktop, or tablet devices. Experiences are produced using Three.js/AFrame to achieve a secure, cross-platform standard for sharing audio on the Immersive Web.
Developers can implement the module in both modular server-side and non-modular client-side applications with just a few lines of JavaScript code.
Examples:
- build and share your own vr music playlist
Usage:
Server-Side
- install using npm
npm install vraudioplayer
import vraudioplayer (using the 'require' method is recommended; some Node releases do not have the newest ES6 features enabled by default)
add audio files to your playlist then build it
(a) using add method
var myPlayer = require('vraudioplayer');
myPlayer.add('../media/img/You.png', '../media/audio/You.mp3' , { title: 'you', author: 'Unibe@t', year: 2016});
myPlayer.add('../media/img/ReadyOrNot.png', '../media/audio/ReadyOrNot.mp3' , { title: 'Ready or Not', author: 'ConsciousThoughts', year: 2016});
myPlayer.add('../media/img/HighedUp.png', '../media/audio/HighedUp.mp3' , { title: 'HIGHED UP', author: 'SOUDIERE ft. kloudbug', year: 2016});
myPlayer.add('../media/img/ServinFeens.png', '../media/audio/ServinFeens.mp3', { title: 'SERVIN FEENS', author: 'mythic', year: 2016});
myPlayer.add('../media/img/0001.png', '../media/audio/WaterToWine.mp3' , { title: 'Water to Wine', author: 'KAYTRANADA ft. Kali Uchis', year: 2016});
myPlayer.spawn();
(b) using addFromList method
an object or array of objects in the following format can be processed by the module to generate same outcome as above
var myPlayer = require('vraudioplayer');
var collection = {
'you': {
coverURL: '../media/img/You.png',
audioURL: '../media/audio/You.mp3',
metadata: {
title: 'you',
author: 'Unibe@t',
year: 2016
}
},
'Ready or Not': {
coverURL: '../media/img/ReadyOrNot.png',
audioURL: '../media/audio/ReadyOrNot.mp3',
metadata: {
title: 'Ready or Not',
author: 'ConsciousThoughts',
year: 2016
}
},
'Highed Up': {
coverURL: '../media/img/HighedUp.png',
audioURL: '../media/audio/HighedUp.mp3',
metadata: {
title: 'HIGHED UP',
author: 'SOUDIERE ft. kloudbug',
year: 2016
}
},
'SERVIN FEENS': {
coverURL: '../media/img/ServinFeens.png',
audioURL: '../media/audio/ServinFeens.mp3',
metadata: {
title: 'SERVIN FEENS',
author: 'mythic',
year: 2016
}
},
'Water to Wine': {
coverURL: '../media/img/00001.png',
audioURL: '../media/audio/WaterToWine.mp3',
metadata: {
title: 'Water to Wine',
author: 'KAYTRANADA ft. Kali Uchis',
year: 2016
}
}
};
myPlayer.addFromList(collection);
myPlayer.spawn();
Client-Side
- download the boilerplate or make your own test directory
- move to the app.js or index.js level of the directory and create a test.js file
- implement as follows:
var myPlayer = new VRAudioPlayer();
myPlayer.build();
myPlayer.add('../media/img/You.png', '../media/audio/You.mp3' , { title: 'you', author: 'Unibe@t', year: 2016});
myPlayer.add('../media/img/ReadyOrNot.png', '../media/audio/ReadyOrNot.mp3' , { title: 'Ready or Not', author: 'ConsciousThoughts', year: 2016});
myPlayer.add('../media/img/HighedUp.png', '../media/audio/HighedUp.mp3' , { title: 'HIGHED UP', author: 'SOUDIERE ft. kloudbug', year: 2016});
myPlayer.add('../media/img/ServinFeens.png', '../media/audio/ServinFeens.mp3', { title: 'SERVIN FEENS', author: 'mythic', year: 2016});
myPlayer.add('../media/img/0001.png', '../media/audio/WaterToWine.mp3' , { title: 'Water to Wine', author: 'KAYTRANADA ft. Kali Uchis', year: 2016});
coreEventListeners.launch([myPlayer]);
Full API
| property | type | description | | ------------- |:-------------:| -----:| | type | string | short paragraph descriptor of type property | | socket | object | short paragraph descriptor of socket object | | hello | method | short paragraph descriptor of hello method| | buildCoreMarkup | method | short paragraph descriptor of buildCoreMarkup method| | spawn | method | short paragraph descriptor of spawn method| | assetsContainer | object | short paragraph descriptor of assetContainer object | | build | method | short paragraph descriptor of build method | | add | method | short paragraph descriptor of add method | | addFromList | method | short paragraph descriptor of addFromList method | | showTrackList | method | short paragraph descriptor of showTrackList method | | playNextTrack | method | short paragraph descriptor of playNextTrack method | | playPreviousTrack | method | short paragraph descriptor of playPreviousTrack method | | stream | method | short paragraph descriptor of type method | | application | object | short paragraph descriptor of type object | | view | string | short paragraph descriptor of type property | | XRSetting | string | short paragraph descriptor of type property |