• Stars
    star
    94
  • Rank 355,903 (Top 8 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 11 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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

More Repositories

1

npm-pdfreader

🚜 Parse text and tables from PDF files.
HTML
544
star
2

landing-page-boilerplate

🖼 A pure client-side landing page template that you can fork, customize and host freely. Relies on Mailchimp and Google Analytics.
HTML
144
star
3

chrome-next-step-for-trello

✅ Chrome extension to check tasks directly from your Trello boards
HTML
72
star
4

js-test

💯 Exerciseur / outils d'évaluation d'étudiants -- NOT MAINTAINED ANYMORE
JavaScript
42
star
5

HsbcStatementParser

Transforms PDF bank statements from HSBC into a list of operations in JSON or TSV format.
JavaScript
14
star
6

cours-javascript

📖 Supports de cours JavaScript au format Gitbook, pour étudiants EEMI de 1ère année
HTML
14
star
7

webmidi-launchkey-mini

🎹 Online 8-bit/chiptune synth, using WebAudio and WebMIDI
JavaScript
14
star
8

chrome-inbox-permalinks

🔗 A Chrome Extension that provides direct URLs to your emails, from Google Inbox.
JavaScript
12
star
9

npm-pdfreader-example

Example of use of pdfreader: parse a PDF résumé
JavaScript
11
star
10

backup-scripts

Bash scripts that I run regularly to backup my content from Trello, Diigo Outliner, etc...
JavaScript
9
star
11

comment-editor-for-trello

Advanced Comments by AJ: turn Trello into a Notebook. (Power-up for Trello)
HTML
9
star
12

freelance-directory-client

📇 Web app to find the right freelancer from your contacts, and keep their skills / availability / preferences up to date.
JavaScript
9
star
13

adrienjoly.github.io

📌 My public portfolio / personal homepage
HTML
8
star
14

telegram-scribe-bot

🤖 A chat-bot to take notes and add tasks from Telegram.
TypeScript
8
star
15

js-exam

Customizable coding exam web app for Javascript course students. Moved 👉 https://github.com/adrienjoly/js-test
JavaScript
7
star
16

album-shelf

💿 Collection of music records I love, maintained with Jekyll on Github Pages
JavaScript
7
star
17

react-playemjs

React 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. Based on http://github.com/adrienjoly/playemjs
JavaScript
7
star
18

hangout-timer

A plug-in/extension for Google Hangouts, to time speakers' participation, for efficient team meetings.
HTML
6
star
19

algocodesearch

🕵️‍♀️ off-sprint project that intends to index symbols from a language server (LSP), for code search
JavaScript
5
star
20

mp3-fetch-metadata

Script that identifies track title and artist from a list of MP3 files, thanks to audio fingerprinting.
JavaScript
5
star
21

cours-nodejs

👩‍🎓 Cours: Création d’API et d'Applications Web avec Node.js
HTML
4
star
22

classroom-submissions-to-pdf

Extract codepen/jsfiddle/jsbin links from Google Classroom submissions => convert in PDF, for annotation and grading
JavaScript
4
star
23

react-music-player

A web app made with react.js, that can play a list of tracks from various streaming services
JavaScript
4
star
24

1poll

A simple doodle-like poll that makes it easy for contributors to add more options.
JavaScript
4
star
25

playem

A static web app that sequentially plays Youtube videos from your Facebook stream.
JavaScript
4
star
26

slides-webaudio-gameboy-music

HTML
3
star
27

snoozer

Calendar management experiments for productivity improvement (wip)
JavaScript
3
star
28

nodeMongoAdmin

WIP: a web app to manage/administrate a mongodb database (like phpMyAdmin)
JavaScript
3
star
29

persistent-harmony

A wrapper class to create persistent javascript objects, relying on harmony proxies.
JavaScript
3
star
30

jekyll-tutorial

Tutorial: how to maintain a list online using Jekyll and Github Pages
Ruby
3
star
31

react-1poll

A simple React component to make doodle-like collaborative polls.
JavaScript
2
star
32

classroom-assignments-cli

👩‍🎓 a CLI to download assignements submitted by students on Google Classroom
JavaScript
2
star
33

HackathonDating

2
star
34

chrome-contacts-for-google-inbox

A minimal extension that links recipients from Google Inbox to their Google Contact page.
JavaScript
2
star
35

a-frame-descent-vr

👾 Learning how to create a VR version of "Descent" using a-frame
JavaScript
2
star
36

notif-mailer

Service that sends notification emails, from a Firebase queue.
JavaScript
2
star
37

gmailbox

Python scripts to download emails to a mbox file, and then deliver them to a POP3 client.
Python
2
star
38

openwhyd-pl-dl

A youtube-dl based script to backup your Openwhyd playlists.
Shell
2
star
39

search

Search all your conversations from one same place
HTML
1
star
40

cours-nodejs-exercise-testers

🤖 Scripts d'évaluation automatique pour les exercices de mon cours Node.js
JavaScript
1
star
41

deno-beatfinger

👾 Experimental development of an engine-agnostic rhythm game in TDD, powered by Deno and Phazer3 (for now)
HTML
1
star
42

AlbumKeeper

a simple meteor project that maintains a list of web-based music albums
JavaScript
1
star
43

cv

CV SHODO
SCSS
1
star
44

oauth-bridge

(WIP) A OAuth bridge to plug on Openwhyd.org
JavaScript
1
star
45

freelance-directory-profile

A xml file publishing my expertise, rate, availability and preferences for freelance work.
1
star
46

sholegacy-slides

HTML
1
star
47

edison-thermo

A simple thermometer app that runs on an Intel Edison Arduino board with Grove LCD display, and without XDK
JavaScript
1
star
48

gigfm

A web app for playing music from Last.fm-recommended concerts. Based on facebook-template-node. Made with @loickm in 24 hours, during an Angelhack hackathon.
JavaScript
1
star
49

algolia-qyu

Holds, controls and reports on execution of a queue of asynchronous jobs.
JavaScript
1
star
50

openwhyd-search

Quickly search music tracks I posted on my openwhyd profile. ⚠ Closing, in favor of https://github.com/openwhyd/openwhyd-mobile-web-client.
JavaScript
1
star
51

prolog-pacman

Student project written in 2004 with C. Aussourd. Demo video 👉
Prolog
1
star
52

trello-outliner

⚠️ MOVED TO --> https://github.com/adrienjoly/comment-editor-for-trello
JavaScript
1
star
53

ast-example

TypeScript
1
star
54

dartinder

a tinder parody app (pure mobile web client to swipe photos and play sounds)
HTML
1
star
55

enonce

👩‍🎓 Rendu dynamique d'énoncé pour évaluation individualisée d'étudiants
CSS
1
star
56

tcup-sensor

Node.js server for the Intel Edison (arduino board) that pushes the temperature of a cup of tea in real-time, thanks to Socket.io.
JavaScript
1
star
57

cours-lead-dev

Atelier de découverte du rôle de "Lead Developer", donné à l'ESGI
Ruby
1
star
58

nopass

(WIP) trying to get rid of password-based user identification, once for good
JavaScript
1
star
59

poexport

Pocket Outlook Export is a script-like program that exports all the pocket outlook contacts from a PocketPC to a CSV file, following the structure defined in a custom CSV template. Based on .net framework and Pocket Outlook Object Model (POOM) wrapper.
C#
1
star
60

harissaofficial

HTML
1
star