Merge pull request #11 from hyperaudio/multiple-player-support

Multiple player support
hyperaudio · Sep 29, 2020 · 0b254cd · 0b254cd
2 parents b8b7d0e + ee05da9
commit 0b254cd
Show file tree

Hide file tree

Showing 8 changed files with 1,143 additions and 49 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+**/.DS_Store
diff --git a/README.md b/README.md
@@ -98,7 +98,7 @@ This currently takes 4 possible inputs:
 Essentially the Hyperaudio Lite library is made from 4 JavaScript files:
 
 1. `hyperaudio-lite.js` - the core that deals with the linking of media to words
-2. `hyperaudio-lite wrapper` - initialises Hyperaudio Lite and adds search, selection and playback rate functionality 
+2. `hyperaudio-lite wrapper` - adds search, selection and playback rate functionality 
 3. `share-this.js` - a fork of [share-this](https://github.com/MaxArt2501/share-this) library 
 4. `share-this.twitter.js` - a fork of the Twitter sharing element of share-this
 
@@ -134,9 +134,11 @@ and at the end of the `<body>`:
 </body>
 ```
 
-View the source code to [http://hyperaud.io/lab/halite/v18/](https://hyperaud.io/lab/halite/v18/) for a complete example.
+View the source code of [http://hyperaud.io/lab/halite/v21/](https://hyperaud.io/lab/halite/v21/) for a complete example.
 
-## :tv: YouTube Support :tv: 
+See a version with multiple players in a single page [http://hyperaud.io/lab/halite/v21/multiplayer.html](https://hyperaud.io/lab/halite/v21/multiplayer.html)
+
+## :tv: YouTube Support :tv:
 
 In addition to supporting the web-native HTML `<audio>` and `<video>` elements we also support a YouTube `iframe` embed.
 

diff --git a/README_IT.md b/README_IT.md
@@ -10,6 +10,13 @@ Hyperaudio Lite - è un visualizzatore di [Interactive Transcripts](https://en.w
 * nessuna dipendenza dal framework
 * Licenza MIT
 
+## :tiger: Hyperaudio Lite in the Wild
+
+Come dimostrato [http://hyperaud.io/lab/halite/v21/](http://hyperaud.io/lab/halite/v21/)
+
+Versione alternativa [https://github.com/vitorio/hyperaudio-lite](https://github.com/vitorio/hyperaudio-lite)
+
+
 ## :star2: Iper Poteri :star2:
 
 Interactive transcripts sono trascrizioni con poteri speciali. Le trascrizioni interattive di Hyperaudio sono chiamate Hypertranscripts e sono infuse con i seguenti iperpoteri:
@@ -22,7 +29,7 @@ Trova parole e frasi nella tua trascrizione e rendi i tuoi media 'search-engine
 La selezione di parte di una trascrizione crea un URL con i dati di temporizzazione che, se condivisi, porteranno le persone direttamente al pezzo audio corrispondente dove vengono pronunciate le parole evidenziate.
 
 
-## :vhs: Formati di Dati
+## :vhs: Formati di Dati :vhs:
 
 Gli hypertranscript contengono i seguenti dati::
 * Paragrafi
@@ -84,12 +91,12 @@ Questo richiede attualmente 3 possibili input:
 
 *JavaScript Object Notation - un formato di dati comune
 
-## :floppy_disk: Hyperaudio Lite Codice
+## :floppy_disk: Hyperaudio Lite Codice :floppy_disk:
 
 In sostanza la libreria Hyperaudio Lite è composta da 4 file JavaScript:
 
 1. `hyperaudio-lite.js` - il nucleo che si occupa del collegamento dei media alle parole
-2. `hyperaudio-lite wrapper` - inizializza Hyperaudio Lite e aggiunge funzionalità di ricerca, selezione e velocità di riproduzione 
+2. `hyperaudio-lite wrapper` - aggiunge funzionalità di ricerca, selezione e velocità di riproduzione 
 3. `share-this.js` - un fork della libreria [share-this] (https://github.com/MaxArt2501/share-this)
 4. `share-this.twitter.js` - un fork dell'elemento di condivisione Twitter di share-this
 
@@ -125,11 +132,32 @@ e alla fine di `<body>`:
 </body>
 ```
 
-Visualizza il codice sorgente su [http://hyperaud.io/lab/halite/v18/](https://hyperaud.io/lab/halite/v18/) per un esempio completo.
+Visualizza il codice sorgente su [http://hyperaud.io/lab/halite/v21/](https://hyperaud.io/lab/halite/v21/) per un esempio completo.
 
+Visualizza una versione con più lettori multimediali in una singola pagina [http://hyperaud.io/lab/halite/v21/multiplayer.html](https://hyperaud.io/lab/halite/v21/multiplayer.html)
 
-## :tiger: Hyperaudio Lite in the Wild
+## :tv: YouTube Support :tv:
+
+Oltre a supportare gli elementi HTML nativi per il web `<audio>` e `<video>`, supportiamo anche un incorporamento di YouTube `iframe`.
+
+Esempio di incorporamento di `iframe` di YouTube:
+
+```html
+<iframe id="hyperplayer" data-player-type="youtube" width="400" height="300" frameborder="no" allow="autoplay"
+    src="https://www.youtube.com/embed/xLcsdc823dg?enablejsapi=1">
+</iframe>
+```
+
+## :sound: SoundCloud Support :sound:
+
+Supportiamo anche un incorporamento di SoundCloud `iframe`.
+
+Esempio di API Soundcloud e incorporamento di `iframe`:
+
+```html
+<script src="https://w.soundcloud.com/player/api.js"></script>
+<iframe id="so" width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/730479133&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe>
+```
+Puoi ottenere lo snippet di codice visitando la pagina del file SoundCloud che ti interessa, facendo clic su *Share* e poi *Embed*.
 
-Come dimostrato [http://hyperaud.io/lab/halite/v18/](http://hyperaud.io/lab/halite/v18/)
 
-Versione alternativa [https://github.com/vitorio/hyperaudio-lite](https://github.com/vitorio/hyperaudio-lite)
diff --git a/css/hyperaudio-lite-player.css b/css/hyperaudio-lite-player.css
@@ -1,68 +1,68 @@
 /*! (C) The Hyperaudio Project. MIT @license: en.wikipedia.org/wiki/MIT_License. */
 
-#hypertranscript .strikethrough {
+.hyperaudio-transcript .strikethrough {
   text-decoration: line-through;
 }
 
-#hypertranscript .annotation, #hypertranscript .parannotation{
+.hyperaudio-transcript .annotation, .hyperaudio-transcript .parannotation{
   opacity: 0.7;
 }
 
-#hypertranscript .highlight {
+.hyperaudio-transcript .highlight {
   background-color: yellow !important;
 }
 
-#hypertranscript .highlight.active {
+.hyperaudio-transcript .highlight.active {
   background-color: lightGreen !important;
 }
 
-#hypertranscript  header {
+.hyperaudio-transcript  header {
   font-size: 200%;
 }
 
-/*#hypertranscript a {
+/*.hyperaudio-transcript a {
   cursor: pointer;
   color: #000;
 }*/
 /*
-#hypertranscript .active ~ span {
+.hyperaudio-transcript .active ~ span {
   color: #999;
 }
 
-#hypertranscript p.active ~ p span {
+.hyperaudio-transcript p.active ~ p span {
   color: #999;
 }
 */
 
-#hypertranscript a, a.link {
+.hyperaudio-transcript a, a.link {
   border: 0px;
 }
 
-#hypertranscript .read {
+.hyperaudio-transcript .read {
   color: #000 !important;
 }
 
-#hypertranscript .unread {
+.hyperaudio-transcript .unread {
   color: #999 !important;
 }
 
-#hypertranscript .search-match {
+.hyperaudio-transcript .search-match {
   background-color: pink !important;
 }
 
-#hypertranscript .share-match {
+.hyperaudio-transcript .share-match {
   background-color: #66ffad !important;
 }
 
-#hypertranscript sub:before {
+.hyperaudio-transcript sub:before {
   content: '\231C';
 }
 
-#hypertranscript sub.highlight-duration:before {
+.hyperaudio-transcript sub.highlight-duration:before {
   content: '\231D';
 }
 
-#hypertranscript h5 {
+.hyperaudio-transcript h5 {
   font-size: 130%;
 }
 

diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@
   </p>
 
   <!-- Comment out the following line if you are using an alternative player. ie SoundCloud or YouTube -->
-  <video id="hyperplayer" style="z-index: 5000000; position:relative; width:400px" src="https://lab.hyperaud.io/video/BBC/education.mp4" type="audio/mp4" controls></video>
+  <video id="hyperplayer" class="hyperaudio-player" style="z-index: 5000000; position:relative; width:400px" src="https://lab.hyperaud.io/video/BBC/education.mp4" type="audio/mp4" controls></video>
 
   <!-- Uncomment the following lines for SoundCloud compatibility. Keep commented if you are using native or YouTube -->
   <!-- iFrame HTML can be found by clicking the embed button while viewing the audio on SoundCloud -->
@@ -34,7 +34,7 @@
     src="https://www.youtube.com/embed/xLcsdc823dg?enablejsapi=1">
   </iframe> -->
 
-  <div id="hypertranscript" style="overflow-y:scroll; height:600px; position:relative; border-style:dashed; border-width: 1px; border-color:#999; padding: 8px">
+  <div id="hypertranscript" class="hyperaudio-transcript" style="overflow-y:scroll; height:600px; position:relative; border-style:dashed; border-width: 1px; border-color:#999; padding: 8px">
     <article>
       <header></header>
       <section class="active">
@@ -991,6 +991,12 @@ <h5 data-m="214800">What kind of help is available for people to manage their ow
       selector: "article"
   }).init();
 
+  // minimizedMode is still experimental - it aims to show the current words in the title, which can be seen on the browser tab.
+  var minimizedMode = false;
+
+  var ht1 = hyperaudiolite();
+  ht1.init("hypertranscript", "hyperplayer", minimizedMode);
+
   </script>
 
   <!-- Uncomment the following script if you require IE versions less than 10 to be supported or Opera Mini http://caniuse.com/#search=classlist ¯\_(ツ)_/¯ -->

diff --git a/js/hyperaudio-lite-wrapper.js b/js/hyperaudio-lite-wrapper.js
@@ -80,19 +80,16 @@ var searchPhrase = function (phrase) {
 
 window.onload = function() {
 
-  // minimizedMode is still experimental - it aims to show the current words in the title, which can be seen on the browser tab.
-  var minimizedMode = false;
-
-  hyperaudiolite.init("hypertranscript", "hyperplayer", minimizedMode);
-
   // playbackRate listener
 	var p = document.getElementById('pbr');
 	var cp = document.getElementById('currentPbr');
 
-	p.addEventListener('input', function(){
-		cp.innerHTML = p.value;
-		hyperplayer.playbackRate = p.value;
-	},false);
+  if (p !== null) {
+    p.addEventListener('input', function(){
+      cp.innerHTML = p.value;
+      hyperplayer.playbackRate = p.value;
+    },false);
+  }
 }
 
 
diff --git a/js/hyperaudio-lite.js b/js/hyperaudio-lite.js
@@ -1,12 +1,10 @@
 /*! (C) The Hyperaudio Project. MIT @license: en.wikipedia.org/wiki/MIT_License. */
-/*! Version 1.0.0 */
+/*! Version 1.1.0 */
 
 'use strict';
 
 var hyperaudiolite = (function () {
 
-  var hashArray = window.location.hash.substr(3).split(',');
-
   var hal = {},
     transcript,
     player,
@@ -20,11 +18,25 @@ var hyperaudiolite = (function () {
     minimizedMode,
     wordArr = [],
     playerType,
-    currentTime;
+    currentTime,
+    windowHash,
+    hashArray,
+    hashVar;
+
 
   function init(mediaElementId, m) {
 
-    window.addEventListener('mouseup', function() {
+    windowHash = window.location.hash;
+
+    hashVar = windowHash.substring(1,windowHash.indexOf("="));
+
+    if (hashVar === transcript.id) {
+      hashArray = windowHash.substr(transcript.id.length+2).split(',');
+    } else {
+      hashArray = [];
+    }
+
+    transcript.addEventListener('mouseup', function() {
 
       var mediaFragment = getSelectionMediaFragment();
 
@@ -39,7 +51,8 @@ var hyperaudiolite = (function () {
 
     //Create the array of timed elements (wordArr)
 
-    var words = document.querySelectorAll('[data-m]');
+    var words = transcript.querySelectorAll('[data-m]');
+
     for (var i = 0; i < words.length; ++i) {
       var m = parseInt(words[i].getAttribute('data-m'));
       var p = words[i].parentNode;
@@ -59,7 +72,7 @@ var hyperaudiolite = (function () {
     paras = transcript.getElementsByTagName('p');
 
     player = document.getElementById(mediaElementId);
-    console.log(player.tagName);
+
     if (player.tagName == "VIDEO" || player.tagName == "AUDIO") { //native HTML media elements
       playerType = "native";
     } else { //assume it is a SoundCloud or YouTube iframe 
@@ -202,7 +215,7 @@ var hyperaudiolite = (function () {
         nodeDuration = 10; // arbitary for now
       }
 
-      fragment = "#t=" + nodeStart + "," + (Math.round((nodeStart + nodeDuration) * 10) / 10);
+      fragment = transcript.id+ "=" + nodeStart + "," + (Math.round((nodeStart + nodeDuration) * 10) / 10);
     }
 
     return (fragment);
@@ -250,7 +263,6 @@ var hyperaudiolite = (function () {
     //check for end time of shared piece
 
     if (end && (end < currentTime)) {
-      console.log("end of piece");
       player.pause();
       end = null;
     } else {
@@ -335,7 +347,7 @@ var hyperaudiolite = (function () {
 
         if (currentParaIndex != paraIndex) {
           Velocity(scrollNode, "scroll", {
-            container: hypertranscript,
+            container: transcript,
             duration: 800,
             delay: 0
           });
@@ -350,7 +362,7 @@ var hyperaudiolite = (function () {
 
       if (minimizedMode) {
 
-        var elements = document.querySelectorAll('[data-m]');
+        var elements = transcript.querySelectorAll('[data-m]');
         var currentWord = "";
         var lastWordIndex = wordIndex;
 
@@ -387,4 +399,4 @@ var hyperaudiolite = (function () {
 
   return hal;
 
-})();
+});