Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/adrienjoly/playemjs

▶️ Streams a list of tracks from Youtube, Soundcloud, Vimeo...
https://github.com/adrienjoly/playemjs

component javascript music playback streaming youtube

Last synced: about 1 month ago
JSON representation

▶️ Streams a list of tracks from Youtube, Soundcloud, Vimeo...

Lists

README 

        
[![Analytics](https://ga-beacon.appspot.com/UA-1858235-12/playemjs/github)](https://github.com/igrigorik/ga-beacon)



PlayemJS

========



PlayemJS is a front-end JavaScript component that manages a audio/video track queue and plays those tracks sequentially.



It can currently play tracks from the following streaming platforms:

- Youtube

- Soundcloud

- Deezer

- Bandcamp

- Vimeo

- Dailymotion

- Jamendo

- ... and MP3 files hosted online



Depending on the platform of each track, PlayemJS dynamically embeds the media in a HTML element, or through the Soundmanager2 audio player.



PlayemJS powers the music curation service [Openwhyd.org](http://openwhyd.org) (formerly whyd.com). That's the best demonstration of its capabilities.



Examples

-----



### 1. Play just a Vimeo video



```html




  const handlers = {};

  const config = {

      playerContainer: document.getElementById("playem_video"),

  };



  new VimeoPlayer(handlers, config)

    .play("98417189");



```



▶️ [Watch it work live on Codepen](http://codepen.io/adrienjoly/pen/QjLRXa?editors=101)



### 2. Play Vimeo and Youtube videos



Using a playlist, multiple players and Event logging.



```html




  YOUTUBE_API_KEY = "XxXxXxXxXxXxXxXxXxXxXxXxXxXxXx"; 



  const config = {

      playerContainer: document.getElementById("playem_video"),

  };



  // init playem and players

  var playem = new Playem();

  playem.addPlayer(VimeoPlayer, config);

  playem.addPlayer(YoutubePlayer, config);



  // play video tracks

  playem.addTrackByUrl("vimeo.com/50872925");

  playem.addTrackByUrl("youtube.com/watch?v=2m5K5jxME18");

  playem.play();



```



▶️ [Watch it work live on Codepen](https://codepen.io/adrienjoly/pen/EXXEXq?editors=1011)



### 3. Play Video and Audio streams



Relies on soundmanager2.



```html




  const config = {

      playerContainer: document.getElementById("playem_video"),

  };



  // init playem and players

  var playem = new Playem();

  playem.addPlayer(AudioFilePlayer, config);

  playem.addPlayer(VimeoPlayer, config);



  // init logging for player events

  playem.on("onTrackChange", (data) => console.log("play track " + data.trackId));

  playem.on("onError", (data) => console.error("error:", data));



  // create a playlist

  playem.addTrackByUrl("https://archive.org/download/JeremyJereskyDrumLoop/drumLoop.mp3");

  playem.addTrackByUrl("vimeo.com/50872925");



  // wait for soundmanager to be ready before playing tracks

  soundManager.setup({ onready: () => playem.play() });

  soundManager.beginDelayedInit();



```



▶️ [Watch it work live on Codepen](https://codepen.io/adrienjoly/pen/bRRMdQ?editors=1011)



Usage with npm

--------------



    npm install playemjs



Then use it that way in your front-end code:



```html




  // your app's API KEYS here

  window.SOUNDCLOUD_CLIENT_ID = "11f9999111b5555c22227777c3333fed"; // your api key

  window.DEEZER_APP_ID = 123456789;

  window.DEEZER_CHANNEL_URL = "http://mysite.com/deezer-channel.html";

  window.JAMENDO_CLIENT_ID = "f9ff9f0f";



  var playerParams = {

    playerId: "genericplayer",

    origin: window.location.host || window.location.hostname,

    playerContainer: document.getElementById("container")

  };



  window.makePlayem(null, playerParams, function onLoaded(playem){

    playem.on("onTrackChange", function(track){

      console.log("streaming track " + track.trackId + " from " + track.playerName);

    });

    playem.addTrackByUrl("https://www.youtube.com/watch?v=fuhHU_BZXSk");

    playem.addTrackByUrl("https://www.dailymotion.com/video/x25ohb");

    playem.play();

  });



```



React component

---------------



(Work in progress) Check out [react-music-player](https://github.com/adrienjoly/react-music-player).



Tests and further development

-----------------------------

    

You can run tests from that page:



- [PlayemJS Youtube Video Test](https://cdn.rawgit.com/adrienjoly/playemjs/master/test/test-youtube/index.html)

- [PlayemJS Video Players Test](https://cdn.rawgit.com/adrienjoly/playemjs/master/test/test-players/index.html)

- [PlayemJS URL Detection Test](https://cdn.rawgit.com/adrienjoly/playemjs/master/test/test-detection/index.html)



If they don't work from there, you can clone the project, and run them locally.



Any help in documenting/fixing/developing this project is welcome! :-)