p.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Audio Axis</title>
  6. <link href="/static/base.css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <header>
  10. <img src="/static/audioaxis-white.png" alt="Audio Axis">
  11. </header>
  12. <article>
  13. {{range .Songs}}
  14. <section class="song">
  15. <div class="info">
  16. <a href="http://www.youtube.com/watch?v={{.Yid}}">{{.Name}}</a>
  17. {{.User}}
  18. </div>
  19. <div class="thumb">
  20. <img src="http://i.ytimg.com/vi/{{.Yid}}/1.jpg" alt="{{.Name}}">
  21. </div>
  22. <canvas id="{{.Yid}}" width="700" height="20"></canvas>
  23. <br>
  24. <img src="/static/player_play.png" alt="Play" onclick="play('{{.Yid}}')" id="play_{{.Yid}}">
  25. <img src="/static/player_pause.png" alt="Pause" onclick="pause('{{.Yid}}')" id="pause_{{.Yid}}">
  26. <img src="/static/player_stop.png" alt="Stop" onclick="stop('{{.Yid}}')">
  27. <br class="clear">
  28. </section>
  29. {{else}}
  30. No songs found
  31. {{end}}
  32. </article>
  33. {{$first := index .Songs 0}}
  34. <script>
  35. var current_id = '{{$first.Yid}}';
  36. var ids = [{{range .Songs}}'{{.Yid}}',{{end}}];
  37. </script>
  38. <script src="/static/script.js"></script>
  39. <object data="http://www.youtube.com/v/{{$first.Yid}}?version=3&amp;enablejsapi=1" id="player" width="1" height="1" type="application/x-shockwave-flash">
  40. <param name="movie" value="http://www.youtube.com/v/{{$first.Yid}}?version=3&amp;enablejsapi=1">
  41. <param name="allowScriptAccess" value="always">
  42. <embed src="http://www.youtube.com/v/{{$first.Yid}}?version=3&amp;enablejsapi=1" allowScriptAccess="always">
  43. </object>
  44. </body>
  45. </html>