play.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>PlayByTurn</title>
  7. </head>
  8. <body>
  9. <h1>PlayByTurn</h1>
  10. <p><a id="nextSong" href="#">Next song</a></p>
  11. <p id="playing">Nothing playing...</p>
  12. <audio controls id="player"></audio>
  13. <p><small>PlayByTurn is released under the GNU Affero General Public License and available on <a href="https://notabug.org/SylvieLorxu/PlayByTurn">NotABug</a>.</small></p>
  14. <script src="/socket.io/socket.io.js"></script>
  15. <script>
  16. window.history.replaceState(null, '', '/play');
  17. var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  18. var socket = io.connect('http://' + window.location.hostname + ':3000/');
  19. var songInfoElement = document.getElementById('playing');
  20. var songElement = document.getElementById('player');
  21. document.getElementById('nextSong').onclick = function() {
  22. console.log('Switching song!');
  23. socket.emit('songEnd');
  24. };
  25. songElement.addEventListener('ended', function() {
  26. socket.emit('songEnd');
  27. songInfoElement.innerHTML = 'Nothing playing...';
  28. });
  29. socket.on('newSong', function (data) {
  30. songElement.innerHTML = '<source src="/currentFile?' + data['url'] + '"></source>';
  31. songElement.pause();
  32. songElement.load();
  33. songElement.play();
  34. songInfoElement.innerHTML = 'Currently playing: <a href="' + data['url'] + '">' + data['url'] + '</a>';
  35. });
  36. </script>
  37. </body>
  38. </html>