LyokoVRAudioPlayer

for kiesse and melissa

an audio player for distributed immersive applications built in Lyoko

The LyokoVRAudioPlayer generates an audio player that users can experience in virtual reality through a pARk 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

Client-side

Server-Side

1. install using npm

npm install lyoko-vraudioplayer

2. import lyoko-vraudioplayer (using the 'require' method is recommended; some Node releases do not have the newest ES6 features enabled by default)

3. add audio files to your playlist then build it

(a) using add method

var myPlayer = require('lyoko-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('lyoko-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

1. download the boilerplate or make your own test directory
2. create a test.js file:

var myPlayer = new LyokoVRAudioPlayer();
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]);

3. run "node test.js" to render the player

Full API

| property | type | description | | ------------- |:-------------:| -----:| | type | string | the object type of the Player | | socket | object | the web socket connection the Player uses for IP communication | | hello | method | the initiator method| | buildCoreMarkup | method | builds the core visual components of the Player| | spawn | method | adds the Player to the Environment| | assetsContainer | object | the Player's immersive asset manager | | build | method | builds the core behavioral components of the Player| | add | method | adds a user-defined Track | | addFromList | method | compiles a Playlist from a user-defined Collection | | showTrackList | method | shows the currently compiled Playlist | | playNextTrack | method | plays the next Track in the Playlist | | playPreviousTrack | method | plays the previous Track in the Playlist | | stream | method | streams the Player content | | application | object | the application programming interface for the Player | | view | string | short paragraph descriptor of type property | | XRSetting | string | the current Format or View of the Player |