Merge branch 'master' of ssh://git.xpub.nl:2501/XPUB/SI12-prototyping

5 years ago · 584f1e4431
parent 5db5625207 55c2ac60c8
commit 584f1e4431
2 changed files with 51 additions and 0 deletions
--- a/player/player.html
+++ b/player/player.html
@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Title of this page</title>
+</head>
+<body>
+<div id="week_01" class="player">
+      <div class="sec_title_01">#12.1 - 14/05</div>
+      <ul id="table_content_01">
+        <li id="track_1">Soleil No / Mika / 5'33''</li>
+        <li id="track_2">Souvenir / Damla / 5'38''</li>
+        <li id="track_3">Jingle</li>
+        <li id="track_4">poetry_mini_mix / Sandra / 3'22"</li>
+        <li id="track_5">sector D4X0 / Max & Ioana / 7'53''</li>
+        <li id="track_6">Jingle</li>
+        <li id="track_7">Louis XV will save us all / Clara / 1'47''</li>
+        <li id="track_8">Protocall: Do conversations ever end? / Mark & Tisa / ~10''</li>
+        <li id="track_9">Synchonisation Piece #1 (a person with a heartbeat of 72 bpm standing next to person with a heartbeat of 70 bpm) / Mark / 1'20''</li>
+        <li id="track_10">Imagining, re-thinking and recording the world outside / Anna & Avital / 6'21"</li>
+        <li id="track_11">jingle</li>
+      </ul> 
+      <div class="audio_01">
+        <audio controls>
+        <source src="https://issue.xpub.nl/12/archive_12.1.3.mp3" type="audio/mp3">
+              <track default kind="captions"
+               srclang="en"
+               src="https://issue.xpub.nl/12/archive_12.1.3.vtt"/>
+      </audio>
+      </div>
+      <p>You can check this <a href="https://pad.xpub.nl/p/implicancies-01" target="_blank">pad</a> for resources.</p>
+</div>
+</body>
+</html>
--- a/player/player2.js
+++ b/player/player2.js
@ -0,0 +1,16 @@
+function player(element){
+  var track = element.querySelector("track");
+  track.addEventListener('cuechange', function () {
+    let cues = track.track.activeCues;  // array of current cues
+    console.log("cuechange", cues, cues[0].text, cues[0].startTime, cues[0].endTime);
+    var d = JSON.parse(cues[0].text);
+    console.log("d",d);
+    var old = element.querySelector(".now_playing");
+      if (old) {
+        old.classList.remove("now_playing");
+      }
+    var playing = document.getElementById(d.title);
+    playing.classList.add("now_playing");
+    console.log("playing",playing);
+  });
+}