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>
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>
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>
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.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>
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! :-)
7.2k Jan 4, 2023
4 Sep 24, 2022
8k Dec 27, 2022
3 Jul 4, 2022
23.1k Jan 3, 2023
4 Dec 28, 2022
23 Nov 3, 2022
26 Dec 25, 2022
23 Jul 11, 2022
3 Apr 25, 2022
48 Nov 28, 2022
6 Oct 7, 2022
5 Jul 28, 2022
66 Nov 25, 2022
137 Jan 2, 2023
69 Dec 17, 2022
186 Jan 3, 2023