A web music player written in JS

player.js 1.8KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. function Player(sources) {
  2. this.playlist = sources;
  3. this.current = {};
  4. this.isPlaying = false;
  5. this.player;
  6. this.YTplayer = false;
  7. this.init = function() {
  8. this.loadYTplayer();
  9. this.bindEvents();
  10. console.log('init...');
  11. }
  12. this.bindEvents = function() {
  13. var toggle = document.getElementById('player-toggle');
  14. toggle.addEventListener('click', this.toggle);
  15. var previous = document.getElementById('player-previous');
  16. previous.addEventListener('click', this.previous);
  17. var next = document.getElementById('player-next');
  18. next.addEventListener('click', this.next);
  19. }
  20. this.newSong = function (videoId) {
  21. if (this.YTplayer)
  22. this.YTplayer.parentNode.removeChild(this.YTplayer);
  23. this.YTplayer = new YT.Player('YTplayer', {
  24. height: '0',
  25. width: '0',
  26. videoId: videoId,
  27. playerVars: {
  28. },
  29. events: {
  30. 'onReady': onPlayerReady,
  31. 'onStateChange': onPlayerStateChange
  32. }
  33. });
  34. }
  35. this.loadYTplayer = function() {
  36. var tag = document.createElement('script');
  37. tag.src = "https://www.youtube.com/iframe_api";
  38. var firstScriptTag = document.getElementsByTagName('script')[0];
  39. firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  40. };
  41. this.seekPosition = function() {};
  42. this.toggle = function() {
  43. if (evaplayer.isPlaying) {
  44. evaplayer.YTplayer.pauseVideo();
  45. } else {
  46. evaplayer.YTplayer.playVideo();
  47. }
  48. evaplayer.isPlaying = !evaplayer.isPlaying;
  49. return evaplayer;
  50. };
  51. this.next = function() {
  52. return
  53. };
  54. this.previous = function() {};
  55. this.init();
  56. };
  57. function onYouTubeIframeAPIReady() {
  58. evaplayer.newSong('519_pOvP9xs');
  59. }
  60. function onPlayerReady(event) {
  61. event.target.playVideo();
  62. }
  63. function onPlayerStateChange(event) {
  64. if (event.data == YT.PlayerState.PLAYING && !evaplayer.isPlaying) {
  65. evaplayer.isPlaying = true;
  66. }
  67. }