indeplatforma-player-demo/index.html at gh-pages · radiokit/indeplatforma-player-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<html>
<head>
  <title>RadioKit JS Toolkit Playback Demo</title>
  <meta charset="utf-8">
  <script src="core-promise.js"></script>
  <script src="radiokit-toolkit-playback.js"></script>

  <script>
  function init() {
    window.player = new RadioKitToolkitPlayback.Channel.Player("0ea31dee-bf3a-44db-a528-0badb1cd2b1d", "123");
    window.player.on('track-playback-started', function(track) {
      document.getElementById('track-id').innerHTML = 'TRACK ID: ' + track.getId();

      track.getInfoAsync()
        .then(function(trackInfo) {

          // Name
          document.getElementById('track-name').innerHTML = 'NAME: ' + trackInfo.getName();

          // Metadata
          var metadataInfo = trackInfo.getMetadata();
          var metadataText = 'METADATA:<ul>';
          metadataKeys = Object.keys(metadataInfo);
          for(var i = 0; i < metadataKeys.length; i++) {
            metadataText += '<li><b>' + metadataKeys[i] + '</b>: ' + metadataInfo[metadataKeys[i]] + '</li>';
          }
          metadataText += '</ul>';

          document.getElementById('track-metadata').innerHTML = metadataText;

          // Affiliates
          var affiliatesInfo = trackInfo.getAffiliates();
          var affiliatesText = 'AFFILIATES:<ul>';
          affiliatesKeys = Object.keys(affiliatesInfo);
          for(var i = 0; i < affiliatesKeys.length; i++) {
            affiliatesText += '<li><b>' + affiliatesKeys[i] + '</b>: ' + JSON.stringify(affiliatesInfo[affiliatesKeys[i]]) + '</li>';
          }
          affiliatesText += '</ul>';

          document.getElementById('track-affiliates').innerHTML = affiliatesText;
        })
        .catch(function(reason) {
          throw reason;
        });
    });
    window.player.on('track-position', function(track, position, duration) {
      document.getElementById('track-position').innerHTML = 'POSITION: ' + position + ' / ' + duration + ' ms';
    });
  }


  function toggle() {
    var button = document.getElementById('button');

    if(window.player.isStarted()) {
      button.innerHTML = "PLAY";
      window.player.stop();
    } else {
      button.innerHTML = "STOP";
      window.player.start();
    }
  }


  function setVolume(volume) {
    window.player.setVolume(volume);
  }
  </script>
</head>

<body onload="init()" style="text-align: center">
  <button onclick="toggle()" id="button" style="width: 400px; height: 200px; font-size: 24pt">PLAY</button>

  <br><br>

  <button onclick="setVolume(0.25)" style="width: 97px; height: 50px; font-size: 11pt">VOL 25%</button>
  <button onclick="setVolume(0.50)" style="width: 97px; height: 50px; font-size: 11pt">VOL 50%</button>
  <button onclick="setVolume(0.75)" style="width: 97px; height: 50px; font-size: 11pt">VOL 75%</button>
  <button onclick="setVolume(1.0)" style="width: 97px; height: 50px; font-size: 11pt">VOL 100%</button>

  <br><br>

  <div id="track-id" style="width: 400px; text-align: center; margin: 0 auto"></div>

  <br>

  <div id="track-position" style="width: 400px; text-align: center; margin: 0 auto"></div>

  <br>

  <div id="track-name" style="width: 400px; text-align: center; margin: 0 auto"></div>

  <br>

  <div id="track-metadata" style="width: 400px; text-align: left; margin: 0 auto"></div>

  <br>

  <div id="track-affiliates" style="width: 400px; text-align: left; margin: 0 auto"></div>

</body>
</html>