PageSourceSearch

https://justnock.com/themes/wowonder/javascript/green-audio-player/green-audio-player.js?version=4.3.4

js justnock.com collected 2026-09-24 09:37:54 UTC 27,424 bytes, 611 lines download raw bytes

1(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.GreenAudioPlayer = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
2"use strict";
3
4module.exports = require('./src/js/main').default;
5
6},{"./src/js/main":2}],2:[function(require,module,exports){
7"use strict";
8
9Object.defineProperty(exports, "__esModule", {
10  value: true
11});
12exports.default = void 0;
13
14function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
15
16function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
17
18function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
19
20function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
21
22function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
23
24function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
25
26function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
27
28var GreenAudioPlayer = /*#__PURE__*/function () {
29  function GreenAudioPlayer(player, options) {
30    _classCallCheck(this, GreenAudioPlayer);
31
32    this.audioPlayer = typeof player === 'string' ? document.querySelector(player) : player;
33    var opts = options || {};
34    var audioElement = this.audioPlayer.innerHTML;
35    this.audioPlayer.classList.add('green-audio-player');
36    this.audioPlayer.innerHTML = GreenAudioPlayer.getTemplate() + audioElement;
37    this.isDevice = /ipad|iphone|ipod|android/i.test(window.navigator.userAgent.toLowerCase()) && !window.MSStream;
38    this.playPauseBtn = this.audioPlayer.querySelector('.play-pause-btn');
39    this.loading = this.audioPlayer.querySelector('.loading');
40    this.sliders = this.audioPlayer.querySelectorAll('.slider');
41    this.progress = this.audioPlayer.querySelector('.controls__progress');
42    this.volumeBtn = this.audioPlayer.querySelector('.volume__button');
43    this.volumeControls = this.audioPlayer.querySelector('.volume__controls');
44    this.volumeProgress = this.volumeControls.querySelector('.volume__progress');
45    this.player = this.audioPlayer.querySelector('audio');
46    this.currentTime = this.audioPlayer.querySelector('.controls__current-time');
47    this.totalTime = this.audioPlayer.querySelector('.controls__total-time');
48    this.speaker = this.audioPlayer.querySelector('.volume__speaker');
49    this.download = this.audioPlayer.querySelector('.download');
50    this.downloadLink = this.audioPlayer.querySelector('.download__link');
51    this.span = this.audioPlayer.querySelectorAll('.message__offscreen');
52    this.svg = this.audioPlayer.getElementsByTagName('svg');
53    this.img = this.audioPlayer.getElementsByTagName('img');
54    this.draggableClasses = ['pin'];
55    this.currentlyDragged = null;
56    this.stopOthersOnPlay = opts.stopOthersOnPlay || false;
57    this.enableKeystrokes = opts.enableKeystrokes || false;
58    this.showTooltips = opts.showTooltips || false;
59    var self = this;
60    this.labels = {
61      volume: {
62        open: 'Open Volume Controls',
63        close: 'Close Volume Controls'
64      },
65      pause: 'Pause',
66      play: 'Play',
67      download: 'Download'
68    };
69
70    if (!this.enableKeystrokes) {
71      for (var i = 0; i < this.span.length; i++) {
72        this.span[i].outerHTML = '';
73      }
74    } else {
75      window.addEventListener('keydown', this.pressKb.bind(self), false);
76      window.addEventListener('keyup', this.unPressKb.bind(self), false);
77      this.sliders[0].setAttribute('tabindex', 0);
78      this.sliders[1].setAttribute('tabindex', 0);
79      this.download.setAttribute('tabindex', -1);
80      this.downloadLink.setAttribute('tabindex', -1);
81
82      for (var j = 0; j < this.svg.length; j++) {
83        this.svg[j].setAttribute('tabindex', 0);
84        this.svg[j].setAttribute('focusable', true);
85      }
86
87      for (var k = 0; k < this.img.length; k++) {
88        this.img[k].setAttribute('tabindex', 0);
89      }
90    }
91
92    if (this.showTooltips) {
93      this.playPauseBtn.setAttribute('title', this.labels.play);
94      this.volumeBtn.setAttribute('title', this.labels.volume.open);
95      this.downloadLink.setAttribute('title', this.labels.download);
96    }
97
98    if (opts.outlineControls || false) {
99      this.audioPlayer.classList.add('player-accessible');
100    }
101
102    if (opts.showDownloadButton || false) {
103      this.showDownload();
104    }
105
106    this.initEvents();
107    this.directionAware();
108    this.overcomeIosLimitations();
109
110    if ('autoplay' in this.player.attributes) {
111      var promise = this.player.play();
112
113      if (promise !== undefined) {
114        promise.then(function () {
115          var playPauseButton = self.player.parentElement.querySelector('.play-pause-btn__icon');
116          playPauseButton.attributes.d.value = 'M0 0h6v24H0zM12 0h6v24h-6z';
117          self.playPauseBtn.setAttribute('aria-label', self.labels.pause);
118          self.hasSetAttribute(self.playPauseBtn, 'title', self.labels.pause);
119        }).catch(function () {
120          // eslint-disable-next-line no-console
121          console.error('Green Audio Player Error: Autoplay has been prevented, because it is not allowed by this browser.');
122        });
123      }
124    }
125
126    if ('preload' in this.player.attributes && this.player.attributes.preload.value === 'none') {
127      this.playPauseBtn.style.visibility = 'visible';
128      this.loading.style.visibility = 'hidden';
129    }
130  }
131
132  _createClass(GreenAudioPlayer, [{
133    key: "initEvents",
134    value: function initEvents() {
135      var self = this;
136      self.audioPlayer.addEventListener('mousedown', function (event) {
137        if (self.isDraggable(event.target)) {
138          self.currentlyDragged = event.target;
139          var handleMethod = self.currentlyDragged.dataset.method;
140          var listener = self[handleMethod].bind(self);
141          window.addEventListener('mousemove', listener, false);
142
143          if (self.currentlyDragged.parentElement.parentElement === self.sliders[0]) {
144            self.paused = self.player.paused;
145            if (self.paused === false) self.togglePlay();
146          }
147
148          window.addEventListener('mouseup', function () {
149            if (self.currentlyDragged !== false && self.currentlyDragged.parentElement.parentElement === self.sliders[0] && self.paused !== self.player.paused) {
150              self.togglePlay();
151            }
152
153            self.currentlyDragged = false;
154            window.removeEventListener('mousemove', listener, false);
155          }, false);
156        }
157      }); // for mobile touches
158
159      self.audioPlayer.addEventListener('touchstart', function (event) {
160        if (self.isDraggable(event.target)) {
161          var _event$targetTouches = _slicedToArray(event.targetTouches, 1);
162
163          self.currentlyDragged = _event$targetTouches[0];
164          var handleMethod = self.currentlyDragged.target.dataset.method;
165          var listener = self[handleMethod].bind(self);
166          window.addEventListener('touchmove', listener, false);
167
168          if (self.currentlyDragged.parentElement.parentElement === self.sliders[0]) {
169            self.paused = self.player.paused;
170            if (self.paused === false) self.togglePlay();
171          }
172
173          window.addEventListener('touchend', function () {
174            if (self.currentlyDragged !== false && self.currentlyDragged.parentElement.parentElement === self.sliders[0] && self.paused !== self.player.paused) {
175              self.togglePlay();
176            }
177
178            self.currentlyDragged = false;
179            window.removeEventListener('touchmove', listener, false);
180          }, false);
181          event.preventDefault();
182        }
183      });
184      this.playPauseBtn.addEventListener('click', this.togglePlay.bind(self));
185      this.player.addEventListener('timeupdate', this.updateProgress.bind(self));
186      this.player.addEventListener('volumechange', this.updateVolume.bind(self));
187      this.player.volume = 0.81;
188      this.player.addEventListener('loadedmetadata', function () {
189        self.totalTime.textContent = GreenAudioPlayer.formatTime(self.player.duration);
190      });
191      this.player.addEventListener('seeking', this.showLoadingIndicator.bind(self));
192      this.player.addEventListener('seeked', this.hideLoadingIndicator.bind(self));
193      this.player.addEventListener('canplay', this.hideLoadingIndicator.bind(self));
194      this.player.addEventListener('ended', function () {
195        GreenAudioPlayer.pausePlayer(self.player, 'ended');
196        self.player.currentTime = 0;
197        self.playPauseBtn.setAttribute('aria-label', self.labels.play);
198        self.hasSetAttribute(self.playPauseBtn, 'title', self.labels.play);
199      });
200      this.volumeBtn.addEventListener('click', this.showHideVolume.bind(self));
201      window.addEventListener('resize', self.directionAware.bind(self));
202      window.addEventListener('scroll', self.directionAware.bind(self));
203
204      for (var i = 0; i < this.sliders.length; i++) {
205        var pin = this.sliders[i].querySelector('.pin');
206        this.sliders[i].addEventListener('click', self[pin.dataset.method].bind(self));
207      }
208
209      this.downloadLink.addEventListener('click', this.downloadAudio.bind(self));
210    }
211  }, {
212    key: "overcomeIosLimitations",
213    value: function overcomeIosLimitations() {
214      var self = this;
215
216      if (this.isDevice) {
217        // iOS does not support "canplay" event
218        this.player.addEventListener('loadedmetadata', this.hideLoadingIndicator.bind(self)); // iOS does not let "volume" property to be set programmatically
219
220        this.audioPlayer.querySelector('.volume').style.display = 'none';
221        this.audioPlayer.querySelector('.controls').style.marginRight = '0';
222      }
223    }
224  }, {
225    key: "isDraggable",
226    value: function isDraggable(el) {
227      var canDrag = false;
228      if (typeof el.classList === 'undefined') return false; // fix for IE 11 not supporting classList on SVG elements
229
230      for (var i = 0; i < this.draggableClasses.length; i++) {
231        if (el.classList.contains(this.draggableClasses[i])) {
232          canDrag = true;
233        }
234      }
235
236      return canDrag;
237    }
238  }, {
239    key: "inRange",
240    value: function inRange(event) {
241      var touch = 'touches' in event; // instanceof TouchEvent may also be used
242
243      var rangeBox = this.getRangeBox(event);
244      var sliderPositionAndDimensions = rangeBox.getBoundingClientRect();
245      var direction = rangeBox.dataset.direction;
246      var min = null;
247      var max = null;
248
249      if (direction === 'horizontal') {
250        min = sliderPositionAndDimensions.x;
251        max = min + sliderPositionAndDimensions.width;
252        var clientX = touch ? event.touches[0].clientX : event.clientX;
253        if (clientX < min || clientX > max) return false;
254      } else {
255        min = sliderPositionAndDimensions.top;
256        max = min + sliderPositionAndDimensions.height;
257        var clientY = touch ? event.touches[0].clientY : event.clientY;
258        if (clientY < min || clientY > max) return false;
259      }
260
261      return true;
262    }
263  }, {
264    key: "updateProgress",
265    value: function updateProgress() {
266      var current = this.player.currentTime;
267      var percent = current / this.player.duration * 100;
268      this.progress.setAttribute('aria-valuenow', percent);
269      this.progress.style.width = "".concat(percent, "%");
270      this.currentTime.textContent = GreenAudioPlayer.formatTime(current);
271    }
272  }, {
273    key: "updateVolume",
274    value: function updateVolume() {
275      this.volumeProgress.setAttribute('aria-valuenow', this.player.volume * 100);
276      this.volumeProgress.style.height = "".concat(this.player.volume * 100, "%");
277
278      if (this.player.volume >= 0.5) {
279        this.speaker.attributes.d.value = 'M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z';
280      } else if (this.player.volume < 0.5 && this.player.volume > 0.05) {
281        this.speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667M17.333 11.373C17.333 9.013 16 6.987 14 6v10.707c2-.947 3.333-2.987 3.333-5.334z';
282      } else if (this.player.volume <= 0.05) {
283        this.speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667';
284      }
285    }
286  }, {
287    key: "getRangeBox",
288    value: function getRangeBox(event) {
289      var rangeBox = event.target;
290      var el = this.currentlyDragged;
291
292      if (event.type === 'click' && this.isDraggable(event.target)) {
293        rangeBox = event.target.parentElement.parentElement;
294      }
295
296      if (event.type === 'mousemove') {
297        rangeBox = el.parentElement.parentElement;
298      }
299
300      if (event.type === 'touchmove') {
301        rangeBox = el.target.parentElement.parentElement;
302      }
303
304      return rangeBox;
305    }
306  }, {
307    key: "getCoefficient",
308    value: function getCoefficient(event) {
309      var touch = 'touches' in event; // instanceof TouchEvent may also be used
310
311      var slider = this.getRangeBox(event);
312      var sliderPositionAndDimensions = slider.getBoundingClientRect();
313      var K = 0;
314
315      if (slider.dataset.direction === 'horizontal') {
316        // if event is touch
317        var clientX = touch ? event.touches[0].clientX : event.clientX;
318        var offsetX = clientX - sliderPositionAndDimensions.left;
319        var width = sliderPositionAndDimensions.width;
320        K = offsetX / width;
321      } else if (slider.dataset.direction === 'vertical') {
322        var height = sliderPositionAndDimensions.height;
323        var clientY = touch ? event.touches[0].clientY : event.clientY;
324        var offsetY = clientY - sliderPositionAndDimensions.top;
325        K = 1 - offsetY / height;
326      }
327
328      return K;
329    }
330  }, {
331    key: "rewind",
332    value: function rewind(event) {
333      if (this.player.seekable && this.player.seekable.length) {
334        // no seek if not (pre)loaded
335        if (this.inRange(event)) {
336          this.player.currentTime = this.player.duration * this.getCoefficient(event);
337        }
338      }
339    }
340  }, {
341    key: "showVolume",
342    value: function showVolume() {
343      if (this.volumeBtn.getAttribute('aria-attribute') === this.labels.volume.open) {
344        this.volumeControls.classList.remove('hidden');
345        this.volumeBtn.classList.add('open');
346        this.volumeBtn.setAttribute('aria-label', this.labels.volume.close);
347        this.hasSetAttribute(this.volumeBtn, 'title', this.labels.volume.close);
348      }
349    }
350  }, {
351    key: "showHideVolume",
352    value: function showHideVolume() {
353      this.volumeControls.classList.toggle('hidden');
354
355      if (this.volumeBtn.getAttribute('aria-label') === this.labels.volume.open) {
356        this.volumeBtn.setAttribute('aria-label', this.labels.volume.close);
357        this.hasSetAttribute(this.volumeBtn, 'title', this.labels.volume.close);
358        this.volumeBtn.classList.add('open');
359      } else {
360        this.volumeBtn.setAttribute('aria-label', this.labels.volume.open);
361        this.hasSetAttribute(this.volumeBtn, 'title', this.labels.volume.open);
362        this.volumeBtn.classList.remove('open');
363      }
364    }
365  }, {
366    key: "changeVolume",
367    value: function changeVolume(event) {
368      if (this.inRange(event)) {
369        this.player.volume = Math.round(this.getCoefficient(event) * 50) / 50;
370      }
371    }
372  }, {
373    key: "preloadNone",
374    value: function preloadNone() {
375      var self = this;
376
377      if (!this.player.duration) {
378        self.playPauseBtn.style.visibility = 'hidden';
379        self.loading.style.visibility = 'visible';
380      }
381    }
382  }, {
383    key: "togglePlay",
384    value: function togglePlay() {
385      this.preloadNone();
386
387      if (this.player.paused) {
388        if (this.stopOthersOnPlay) {
389          GreenAudioPlayer.stopOtherPlayers();
390        }
391
392        GreenAudioPlayer.playPlayer(this.player);
393        this.playPauseBtn.setAttribute('aria-label', this.labels.pause);
394        this.hasSetAttribute(this.playPauseBtn, 'title', this.labels.pause);
395      } else {
396        GreenAudioPlayer.pausePlayer(this.player, 'toggle');
397        this.playPauseBtn.setAttribute('aria-label', this.labels.play);
398        this.hasSetAttribute(this.playPauseBtn, 'title', this.labels.play);
399      }
400    }
401  }, {
402    key: "hasSetAttribute",
403    value: function hasSetAttribute(el, a, v) {
404      if (this.showTooltips) {
405        if (el.hasAttribute(a)) {
406          el.setAttribute(a, v);
407        }
408      }
409    }
410  }, {
411    key: "setCurrentTime",
412    value: function setCurrentTime(time) {
413      var pos = this.player.currentTime;
414      var end = Math.floor(this.player.duration);
415
416      if (pos + time < 0 && pos === 0) {
417        this.player.currentTime = this.player.currentTime;
418      } else if (pos + time < 0) {
419        this.player.currentTime = 0;
420      } else if (pos + time > end) {
421        this.player.currentTime = end;
422      } else {
423        this.player.currentTime += time;
424      }
425    }
426  }, {
427    key: "setVolume",
428    value: function setVolume(volume) {
429      if (this.isDevice) return;
430      var vol = this.player.volume;
431
432      if (vol + volume >= 0 && vol + volume < 1) {
433        this.player.volume += volume;
434      } else if (vol + volume <= 0) {
435        this.player.volume = 0;
436      } else {
437        this.player.volume = 1;
438      }
439    }
440  }, {
441    key: "unPressKb",
442    value: function unPressKb(event) {
443      var evt = event || window.event;
444
445      if (this.seeking && (evt.keyCode === 37 || evt.keyCode === 39)) {
446        this.togglePlay();
447        this.seeking = false;
448      }
449    }
450  }, {
451    key: "pressKb",
452    value: function pressKb(event) {
453      var evt = event || window.event;
454
455      switch (evt.keyCode) {
456        case 13: // Enter
457
458        case 32:
459          // Spacebar
460          if (document.activeElement.parentNode === this.playPauseBtn) {
461            this.togglePlay();
462          } else if (document.activeElement.parentNode === this.volumeBtn || document.activeElement === this.sliders[1]) {
463            if (document.activeElement === this.sliders[1]) {
464              try {
465                // IE 11 not supporting programmatic focus on svg elements
466                this.volumeBtn.children[0].focus();
467              } catch (error) {
468                this.volumeBtn.focus();
469              }
470            }
471
472            this.showHideVolume();
473          }
474
475          if (evt.keyCode === 13 && this.showDownload && document.activeElement.parentNode === this.downloadLink) {
476            this.downloadLink.focus();
477          }
478
479          break;
480
481        case 37:
482        case 39:
483          // horizontal Arrows
484          if (document.activeElement === this.sliders[0]) {
485            if (evt.keyCode === 37) {
486              this.setCurrentTime(-5);
487            } else {
488              this.setCurrentTime(+5);
489            }
490
491            if (!this.player.paused && this.player.seeking) {
492              this.togglePlay();
493              this.seeking = true;
494            }
495          }
496
497          break;
498
499        case 38:
500        case 40:
501          // vertical Arrows
502          if (document.activeElement.parentNode === this.volumeBtn || document.activeElement === this.sliders[1]) {
503            if (evt.keyCode === 38) {
504              this.setVolume(0.05);
505            } else {
506              this.setVolume(-0.05);
507            }
508          }
509
510          if (document.activeElement.parentNode === this.volumeBtn) {
511            this.showVolume();
512          }
513
514          break;
515
516        default:
517          break;
518      }
519    }
520  }, {
521    key: "showLoadingIndicator",
522    value: function showLoadingIndicator() {
523      this.playPauseBtn.style.visibility = 'hidden';
524      this.loading.style.visibility = 'visible';
525    }
526  }, {
527    key: "hideLoadingIndicator",
528    value: function hideLoadingIndicator() {
529      this.playPauseBtn.style.visibility = 'visible';
530      this.loading.style.visibility = 'hidden';
531    }
532  }, {
533    key: "showDownload",
534    value: function showDownload() {
535      this.download.style.display = 'block';
536    }
537  }, {
538    key: "downloadAudio",
539    value: function downloadAudio() {
540      var src = this.player.currentSrc;
541      var name = src.split('/').reverse()[0];
542      this.downloadLink.setAttribute('href', src);
543      this.downloadLink.setAttribute('download', name);
544    }
545  }, {
546    key: "directionAware",
547    value: function directionAware() {
548      this.volumeControls.classList.remove('top', 'middle', 'bottom');
549
550      if (window.innerHeight < 250) {
551        this.volumeControls.classList.add('middle');
552      } else if (this.audioPlayer.getBoundingClientRect().top < 180) {
553        this.volumeControls.classList.add('bottom');
554      } else {
555        this.volumeControls.classList.add('top');
556      }
557    }
558  }], [{
559    key: "init",
560    value: function init(options) {
561      var players = document.querySelectorAll(options.selector);
562      players.forEach(function (player) {
563        /* eslint-disable no-new */
564        new GreenAudioPlayer(player, options);
565      });
566    }
567  }, {
568    key: "getTemplate",
569    value: function getTemplate() {
570      return "\n            <div class=\"holder\">\n                <div class=\"loading\">\n                    <div class=\"loading__spinner\"></div>\n                </div>\n\n                <div class=\"play-pause-btn\" aria-label=\"Play\" role=\"button\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"24\" viewBox=\"0 0 18 24\">\n                        <path fill=\"#566574\" fill-rule=\"evenodd\" d=\"M18 12L0 24V0\" class=\"play-pause-btn__icon\"/>\n                    </svg>\n                </div>\n            </div>\n\n            <div class=\"controls\">
570\n                <span class=\"controls__current-time\" aria-live=\"off\" role=\"timer\">00:00</span>\n                <div class=\"controls__slider slider\" data-direction=\"horizontal\">\n                    <div class=\"controls__progress gap-progress\" aria-label=\"Time Slider\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\" role=\"slider\">\n                        <div class=\"pin progress__pin\" data-method=\"rewind\"></div>\n                    </div>\n                </div>\n                <span class=\"controls__total-time\">00:00</span>\n            </div>\n\n            <div class=\"volume\">\n                <div class=\"volume__button\" aria-label=\"Open Volume Controls\" role=\"button\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n                        <path class=\"volume__speaker\" fill=\"#566574\" fill-rule=\"evenodd\" d=\"M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z\"/>\n                    </svg>\n                    <span class=\"message__offscreen\">Press Enter or Space to show volume slider.</span>\n                </div>\n                <div class=\"volume__controls hidden\">\n                    <div class=\"volume__slider slider\" data-direction=\"vertical\">\n                        <div class=\"volume__progress gap-progress\" aria-label=\"Volume Slider\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"81\" role=\"slider\">\n                            <div class=\"pin volume__pin\" data-method=\"changeVolume\"></div>\n                        </div>\n                        <span class=\"message__offscreen\">Use Up/Down Arrow keys to increase or decrease volume.</span>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"download\">\n                <a class=\"download__link\" href=\"\" download=\"\" aria-label=\"Download\" role=\"button\">\n                    <svg width=\"24\" height=\"24\" fill=\"#566574\" enable-background=\"new 0 0 29.978 29.978\" version=\"1.1\" viewBox=\"0 0 29.978 29.978\" xml:space=\"preserve\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"m25.462 19.105v6.848h-20.947v-6.848h-4.026v8.861c0 1.111 0.9 2.012 2.016 2.012h24.967c1.115 0 2.016-0.9 2.016-2.012v-8.861h-4.026z\"/>\n                        <path d=\"m14.62 18.426l-5.764-6.965s-0.877-0.828 0.074-0.828 3.248 0 3.248 0 0-0.557 0-1.416v-8.723s-0.129-0.494 0.615-0.494h4.572c0.536 0 0.524 0.416 0.524 0.416v8.742 1.266s1.842 0 2.998 0c1.154 0 0.285 0.867 0.285 0.867s-4.904 6.51-5.588 7.193c-0.492 0.495-0.964-0.058-0.964-0.058z\"/>\n                    </svg>\n                </a>\n            </div>\n        ";
571    }
572  }, {
573    key: "formatTime",
574    value: function formatTime(time) {
575      var min = Math.floor(time / 60);
576      var sec = Math.floor(time % 60);
577      return "".concat(min < 10 ? "0".concat(min) : min, ":").concat(sec < 10 ? "0".concat(sec) : sec);
578    }
579  }, {
580    key: "pausePlayer",
581    value: function pausePlayer(player) {
582      var playPauseButton = player.parentElement.querySelector('.play-pause-btn__icon');
583      playPauseButton.attributes.d.value = 'M18 12L0 24V0';
584      player.pause();
585    }
586  }, {
587    key: "playPlayer",
588    value: function playPlayer(player) {
589      var playPauseButton = player.parentElement.querySelector('.play-pause-btn__icon');
590      playPauseButton.attributes.d.value = 'M0 0h6v24H0zM12 0h6v24h-6z';
591      player.play();
592    }
593  }, {
594    key: "stopOtherPlayers",
595    value: function stopOtherPlayers() {
596      var players = document.querySelectorAll('.green-audio-player audio');
597
598      for (var i = 0; i < players.length; i++) {
599        GreenAudioPlayer.pausePlayer(players[i]);
600      }
601    }
602  }]);
603
604  return GreenAudioPlayer;
605}();
606
607var _default = GreenAudioPlayer;
608exports.default = _default;
609
610},{}]},{},[1])(1)
611});

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.