Skip to content

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

License

Notifications You must be signed in to change notification settings

adrienjoly/playemjs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

7a43de1 · Dec 7, 2024
Dec 1, 2024
Sep 19, 2014
Dec 7, 2024
Dec 7, 2024
Jan 20, 2014
Dec 7, 2024
Mar 28, 2020
Mar 28, 2020
Dec 1, 2024
Dec 31, 2013
Dec 7, 2024
Dec 7, 2024
Sep 27, 2016
Mar 28, 2020
Jun 22, 2017
Dec 7, 2024
Dec 7, 2024
Mar 28, 2020
Dec 10, 2021
Jul 18, 2015
Mar 28, 2020
May 27, 2021
Dec 10, 2021
Dec 7, 2024
Sep 27, 2016
Oct 14, 2018
Nov 1, 2020
Dec 7, 2024
Dec 7, 2024

Repository files navigation

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

npm install playemjs

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

<div id="container"></div>
<script src="dist/playem-min.js"></script>
<script>
  // your app's API KEYS here
  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>

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