JavaScript component that manages a music/video track queue and plays them sequentially from Youtube, Soundcloud, Vimeo...
JavaScript HTML Other
Latest commit 79fe2f1 Sep 28, 2016 @adrienjoly hot fix: prevent "callHandler is not a function" error in soundcloud …
…player, if soundManager is not loaded

cf openwhyd/openwhyd#15
Permalink
Failed to load latest commit information.
alt-players wording typo: Payer -> Player Sep 19, 2014
lib set deezer's protocol to https Jan 20, 2014
test bug #8: also make sure that we can play the track again, after stopping Sep 28, 2016
.gitignore playemjs can now be integrated using browserify Jul 18, 2015
LICENSE Initial commit Dec 31, 2013
Makefile update playerYoutube removing flash Sep 29, 2015
README.md updated URLs of online tests. fixes #2 Sep 10, 2016
bower.json => bumped to v0.1.3 Sep 27, 2016
browserify.js browserify component fixes: safer player instantiation + allow more t… Jul 19, 2015
package.json => bumped to v0.1.3 Sep 27, 2016
playem-TODO.js each player is responsible for cleaning the DOM after call to stop() … Mar 12, 2014
playem-audiofile.js fixed indentation, using 2-space indents Sep 27, 2016
playem-bandcamp.js playemjs can now be integrated using browserify Jul 18, 2015
playem-dailymotion.js fixed indentation, using 2-space indents Sep 27, 2016
playem-deezer.js deezer quick fix: detect login status before playing the track (issue… Sep 28, 2016
playem-jamendo.js fixed indentation, using 2-space indents Sep 27, 2016
playem-soundcloud.js hot fix: prevent "callHandler is not a function" error in soundcloud … Sep 28, 2016
playem-spotify.js fixed indentation, using 2-space indents Sep 27, 2016
playem-vimeo.js fixed indentation, using 2-space indents Sep 27, 2016
playem-youtube.js linting: one `var` per scope Sep 27, 2016
playem.js linting: one `var` per scope Sep 27, 2016

README.md

Analytics

PlayemJS

PlayemJS is a javascript component that manages a music/video track queue and plays a sequence of songs by embedding several players in a HTML DIV including Youtube, Soundcloud and Vimeo.

PlayemJS powers the music curation service Openwhyd.org (formerly whyd.com). That's the best demonstration of its capabilities.

Usage example

The following lines of HTML and Javascript create a container and play two videos in it, sequentially.

<div id="container"></div>
<script>
new PlayemLoader().loadAllPlayers().whenReady(function(playem){
  playem.addTrackByUrl("https://www.youtube.com/watch?v=fuhHU_BZXSk");
  playem.addTrackByUrl("https://www.dailymotion.com/video/x25ohb");
  playem.play();
});
</script>

Demos

  1. Playing a Vimeo video
  2. Playing video from a combined file
  3. Playing two videos in sequence
  4. Playing two Youtube videos in sequence

Usage with npm & browserify

npm install playemjs

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

<html>
<body>
  <div id="container"></div>
  <script src="your-browserify-bundle.js"></script>
  <script>
    // 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();
    });
  </script>
</body>
</html>

Install using Bower

bower install playemjs
make install
make compile
make tests

... or download the javascript files (playem.js and player files you need) into your public directory of your web project.

React component

(Work in progress) Check out react-music-player.

Tests and further development

You can run tests from that page:

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! :-)