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.
<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>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>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>npm install playemjs
Then use it that way in your front-end code:
< 8BB9 div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="<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>"><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>