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);
  });
 }