▶️ JavaScript component that plays a sequence of audio and video streams from Youtube, Soundcloud, Vimeo...
JavaScript HTML Other
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
alt-players wording typo: Payer -> Player Sep 19, 2014
dist v0.1.9, fixes /test/sample.html, closes #4. Nov 3, 2017
docs start writing doc for Loader and Playem, for #10. Oct 24, 2017
lib set deezer's protocol to https Jan 20, 2014
test v0.1.9, fixes /test/sample.html, closes #4. Nov 3, 2017
.gitignore v0.1.7: keep distribuables, store version and commit on npm publish only Aug 13, 2017
LICENSE Initial commit Dec 31, 2013
Makefile v0.1.7: keep distribuables, store version and commit on npm publish only Aug 13, 2017
README.md cosmetic fixed in readme Jun 22, 2017
bower.json => bumped to v0.1.3 Sep 27, 2016
browserify.js browserify component fixes: safer player instantiation + allow more t… Jul 19, 2015
icon.png icon + better code examples in readme Jun 22, 2017
package.json v0.1.9, fixes /test/sample.html, closes #4. Nov 3, 2017
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 fix update for openwhyd issue #102 Oct 10, 2017
playem.js start writing doc for Loader and Playem, for #10. Oct 24, 2017

README.md

Analytics

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 (formerly whyd.com). That's the best demonstration of its capabilities.

Examples

1. Play just a Vimeo video

<div id="playem_video"></div>
<script src="playem.js"></script>
<script src="playem-vimeo.js"></script>
<script>
  const handlers = {};
  const config = {
      playerContainer: document.getElementById("playem_video"),
  };

  new VimeoPlayer(handlers, config)
    .play("98417189");
</script>

▶️ Watch it work live on Codepen

2. Play Vimeo and Youtube videos

Using a playlist, multiple players and Event logging.

<div id="playem_video"></div>
<script src="playem.js"></script>
<script src="playem-vimeo.js"></script>
<script src="playem-youtube.js"></script>
<script>
  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();
</script>

▶️ Watch it work live on Codepen

3. Play Video and Audio streams

Relies on soundmanager2.

<div id="playem_video"></div>
<script src="playem.js"></script>
<script src="playem-vimeo.js"></script>
<script src="playem-audiofile.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/soundmanager2/2.97a.20150601/script/soundmanager2-jsmin.js"></script>
<script>
  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();
</script>

▶️ Watch it work live on Codepen

Usage with npm & browserify

npm install playemjs

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

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

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