greghub / green-audio-player Goto Github PK

i tryied your player in our django admin app
i found, that it is working well in chrome
in Firefox (v.70) seeking is not working well, you cannot seek to any position directly
because player seek in around 1minute intervals
so for example if mp3 file is more then hour longer, you need to click on seek bar 60times if you want to seek near to end of file
but same issue i found with built in Firefox audio player, so probably this is not issue of your code

On laptop or any other device its working perfectly!
But on iPhone using any browsers the spinner does not disappear and stay... (as well as the play button does not appear) so can't play the music, please help me to fix this issue.
`

"use strict";

function slicedToArray(arr, i) { return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function iterableToArrayLimit(arr, i) { var arr = []; var n = true; var d = false; var e = undefined; try { for (var i = arrSymbol.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; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _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); } }

function createClass(Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var GreenAudioPlayer =
/#PURE/
function () {
function GreenAudioPlayer(player) {
_classCallCheck(this, GreenAudioPlayer);

this.audioPlayer = document.querySelector(player);
var audioElement = this.audioPlayer.innerHTML;
this.audioPlayer.classList.add('green-audio-player');
this.audioPlayer.innerHTML = GreenAudioPlayer.getTemplate() + audioElement;
this.playPause = this.audioPlayer.querySelector('.play-pause-btn__icon');
this.playPauseBtn = this.audioPlayer.querySelector('.play-pause-btn');
this.loading = this.audioPlayer.querySelector('.loading');
this.sliders = this.audioPlayer.querySelectorAll('.slider');
this.progress = this.audioPlayer.querySelector('.controls__progress');
this.volumeBtn = this.audioPlayer.querySelector('.volume__button');
this.volumeControls = this.audioPlayer.querySelector('.volume__controls');
this.volumeProgress = this.volumeControls.querySelector('.volume__progress');
this.player = this.audioPlayer.querySelector('audio');
this.currentTime = this.audioPlayer.querySelector('.controls__current-time');
this.totalTime = this.audioPlayer.querySelector('.controls__total-time');
this.speaker = this.audioPlayer.querySelector('.volume__speaker');
this.draggableClasses = ['pin'];
this.currentlyDragged = null;
this.initEvents();
this.directionAware();

}

_createClass(GreenAudioPlayer, [{
key: "initEvents",
value: function initEvents() {
var _this = this;

  var self = this;
  self.audioPlayer.addEventListener('mousedown', function (event) {
    if (self.isDraggable(event.target)) {
      self.currentlyDragged = event.target;
      var handleMethod = self.currentlyDragged.dataset.method;
      var listener = self[handleMethod].bind(self);
      window.addEventListener('mousemove', listener, false);
      window.addEventListener('mouseup', function () {
        self.currentlyDragged = false;
        window.removeEventListener('mousemove', listener, false);
      }, false);
    }
  }); // for mobile touches

  self.audioPlayer.addEventListener('touchstart', function (event) {
    if (self.isDraggable(event.target)) {
      var event$targetTouches = slicedToArray(event.targetTouches, 1);

      self.currentlyDragged = _event$targetTouches[0];
      var handleMethod = self.currentlyDragged.target.dataset.method;
      var listener = self[handleMethod].bind(self);
      window.addEventListener('touchmove', listener, false);
      window.addEventListener('touchend', function () {
        self.currentlyDragged = false;
        window.removeEventListener('touchmove', listener, false);
      }, false);
      event.preventDefault();
    }
  });
  this.playPauseBtn.addEventListener('click', this.togglePlay.bind(self));
  this.player.addEventListener('timeupdate', this.updateProgress.bind(self));
  this.player.addEventListener('volumechange', this.updateVolume.bind(self));
  this.player.addEventListener('loadedmetadata', function () {
    _this.totalTime.textContent = GreenAudioPlayer.formatTime(self.player.duration);
  });
  this.player.addEventListener('seeking', this.showLoadingIndicator.bind(self));
  this.player.addEventListener('canplay', this.hideLoadingIndicator.bind(self));
  this.player.addEventListener('ended', function () {
    self.playPause.attributes.d.value = 'M18 12L0 24V0';
    self.player.currentTime = 0;
  });
  this.volumeBtn.addEventListener('click', function () {
    self.volumeBtn.classList.toggle('open');
    self.volumeControls.classList.toggle('hidden');
  });
  window.addEventListener('resize', self.directionAware.bind(self));
  window.addEventListener('scroll', self.directionAware.bind(self));
  this.sliders.forEach(function (slider) {
    var pin = slider.querySelector('.pin');
    slider.addEventListener('click', self[pin.dataset.method].bind(self));
  });
}

}, {
key: "isDraggable",
value: function isDraggable(el) {
var canDrag = false;
var classes = Array.from(el.classList);
this.draggableClasses.forEach(function (draggable) {
if (classes.indexOf(draggable) !== -1) {
canDrag = true;
}
});
return canDrag;
}
}, {
key: "inRange",
value: function inRange(event) {
var touch = 'touches' in event; // instanceof TouchEvent may also be used

  var rangeBox = this.getRangeBox(event);
  var rect = rangeBox.getBoundingClientRect();
  var direction = rangeBox.dataset.direction;
  var min = null;
  var max = null;

  if (direction === 'horizontal') {
    min = rangeBox.offsetLeft;
    max = min + rangeBox.offsetWidth;
    var clientX = touch ? event.touches[0].clientX : event.clientX;
    if (clientX < min || clientX > max) return false;
  } else {
    min = rect.top;
    max = min + rangeBox.offsetHeight;
    var clientY = touch ? event.touches[0].clientY : event.clientY;
    if (clientY < min || clientY > max) return false;
  }

  return true;
}

}, {
key: "updateProgress",
value: function updateProgress() {
var current = this.player.currentTime;
var percent = current / this.player.duration * 100;
this.progress.style.width = "".concat(percent, "%");
this.currentTime.textContent = GreenAudioPlayer.formatTime(current);
}
}, {
key: "updateVolume",
value: function updateVolume() {
this.volumeProgress.style.height = "".concat(this.player.volume * 100, "%");

  if (this.player.volume >= 0.5) {
    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';
  } else if (this.player.volume < 0.5 && this.player.volume > 0.05) {
    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';
  } else if (this.player.volume <= 0.05) {
    this.speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667';
  }
}

}, {
key: "getRangeBox",
value: function getRangeBox(event) {
var rangeBox = event.target;
var el = this.currentlyDragged;

  if (event.type === 'click' && this.isDraggable(event.target)) {
    rangeBox = event.target.parentElement.parentElement;
  }

  if (event.type === 'mousemove') {
    rangeBox = el.parentElement.parentElement;
  }

  if (event.type === 'touchmove') {
    rangeBox = el.target.parentElement.parentElement;
  }

  return rangeBox;
}

}, {
key: "getCoefficient",
value: function getCoefficient(event) {
var touch = 'touches' in event; // instanceof TouchEvent may also be used

  var slider = this.getRangeBox(event);
  var rect = slider.getBoundingClientRect();
  var K = 0;

  if (slider.dataset.direction === 'horizontal') {
    // if event is touch
    var clientX = touch ? event.touches[0].clientX : event.clientX;
    var offsetX = clientX - slider.offsetLeft;
    var width = slider.clientWidth;
    K = offsetX / width;
  } else if (slider.dataset.direction === 'vertical') {
    var height = slider.clientHeight;
    var clientY = touch ? event.touches[0].clientY : event.clientY;
    var offsetY = clientY - rect.top;
    K = 1 - offsetY / height;
  }

  return K;
}

}, {
key: "rewind",
value: function rewind(event) {
if (this.inRange(event)) {
this.player.currentTime = this.player.duration * this.getCoefficient(event);
}
}
}, {
key: "changeVolume",
value: function changeVolume(event) {
if (this.inRange(event)) {
this.player.volume = Math.round(this.getCoefficient(event) * 10) / 10;
}
}
}, {
key: "togglePlay",
value: function togglePlay() {
if (this.player.paused) {
this.playPause.attributes.d.value = 'M0 0h6v24H0zM12 0h6v24h-6z';
this.player.play();
} else {
this.playPause.attributes.d.value = 'M18 12L0 24V0';
this.player.pause();
}
}
}, {
key: "showLoadingIndicator",
value: function showLoadingIndicator() {
this.playPauseBtn.style.display = 'none';
this.loading.style.display = 'block';
}
}, {
key: "hideLoadingIndicator",
value: function hideLoadingIndicator() {
this.playPauseBtn.style.display = 'block';
this.loading.style.display = 'none';
}
}, {
key: "directionAware",
value: function directionAware() {
this.volumeControls.classList.remove('top', 'middle', 'bottom');

  if (window.innerHeight < 250) {
    this.volumeControls.classList.add('middle');
  } else if (this.audioPlayer.getBoundingClientRect().top < 154) {
    this.volumeControls.classList.add('bottom');
  } else {
    this.volumeControls.classList.add('top');
  }
}

}], [{
key: "getTemplate",
value: function getTemplate() {
return "\n <div class="loading">\n <div class="loading__spinner">\n \n <div class="play-pause-btn">\n <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24">\n <path fill="#000000" fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-btn__icon"/>\n \n \n \n <div class="controls">\n <div class="controls__slider slider" data-direction="horizontal">\n <div class="controls__progress progress">\n <div class="pin progress__pin" data-method="rewind">\n \n \n <span class="controls__current-time">0:00\n / <span class="controls__total-time">0:00\n \n \n <div class="volume">\n <div class="volume__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="#000000" 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 \n \n <div class="volume__controls hidden">\n <div class="volume__slider slider" data-direction="vertical">\n <div class="volume__progress progress">\n <div class="pin volume__pin" data-method="changeVolume">\n \n \n \n \n \n ";
}
}, {
key: "formatTime",
value: function formatTime(time) {
var min = Math.floor(time / 60);
var sec = Math.floor(time % 60);
return "".concat(min, ":").concat(sec < 10 ? "0".concat(sec) : sec);
}
}]);

new GreenAudioPlayer(".gap-example");
}();

window.GreenAudioPlayer = GreenAudioPlayer;`

the player loads the sound twice, so if it is very big it takes a long time

Hi GregHub,
Congratulation on a terrific simple audio player.

I've had concerns about using MediaElementPlayer because of the overhead. (How to reduce it?) It is of course an audio and video player, a WordPress, Facebook. Dailymotion, Flash, Silverlight, Vimeo, YouTube, etc. plugin, and the overhead is enormous, even without JQuery.

I like Green Audio Player a lot, so much so that I made it my own so to speak. In the course of my taking ownership (so to speak), I made some additions and also reductions, that I think are relevant and may also be interesting. I more or less retain the GitHub structure (/build and /src folders), although -- don't worry -- I don't plan on starting a rival project. I would like to share the modified code, if I can link it somewhere in a Zip file.

Would you be interested and would that be okay with you?

I could post a link here that points to my site, but I believe that's unfair promotion. Does GitHub have an anonymous mailbox for contacting you?

Among my changes is that I generate the Html with PHP. The JS template is disabled, but it is still part of the code (if needed).

Best,
Tom

Even with the examples given (single-instance.html) clicking on the slider will not do anything, unless I reload the page.

Am I doing something wrong? Running from python http.server

Love the player, planning to use it for my startup. I think it would really gain some traction if you added options to customize the interface like colors and hiding elements. In the meantime, this is the CSS I'm using to accomplish this:

audio, .green-audio-player .volume, .controls .controls__current-time, .controls .controls__total-time {
    display: none;
}
.green-audio-player .controls .controls__slider {
    margin-right: 0;
}
.green-audio-player {
    background-color: transparent;
    box-shadow: none;
    height: auto;
    padding: 0;
}
.green-audio-player .controls {
    margin-left: 10px;
    margin-right: 0;
}
.green-audio-player .slider .gap-progress, .green-audio-player .slider .gap-progress .progress__pin {
    background-color: $yellow;
}

I'm not immediately seeing how to customize the play/pause button color (you might need to set fill on SVG inline IIRC?). So this is what I'm thinking:

• Hide elements and their margins
• Disable padding/height/box-shadow
• Customize colors (icons, timeline) as well as size (particularly play/pause, timeline dot and the player width itself)
• Option for transparent background

To give you context for what this lets me do:

Also an example of said options in the README would be great. I assume you pass an object, but it's not stated explicitly.

Can there be a better way to handle multiple players? Like passing in a selector class (like .audio-player) as an option. Instead, this is what I'm currently doing:

        <div class="audio-player mt-2" id="player-{{ $loop->iteration }}">
            <audio class="mt-2" controls controlsList="nodownload" rc="{{ $rc->id }}">
                <source src="{{ $rc->url() }}">
                Your browser does not support the audio element.
            </audio>
        </div>

        $('.audio-player').each(function(index, value) {
            var id = $(this).attr('id');

            new GreenAudioPlayer('#' + id, { stopOthersOnPlay: true });
        });

So something like this would be a lot cleaner:

new GreenAudioPlayer({
    selector: '.audio-player',
    stopOthersOnPlay: true
});

Hi,

Does this media player not working on iOS (Safari Browser).
It's working perfectly fine on every other device expect, Apple iOS / Safari

Thanks for your help.

https://github.com/greghub/green-audio-player/issues/17
issue 17 appers again in lastest version

Hi, thank you for developing this fantastic audio player.

when I set {stopOthersOnPlay: true } and clicked to play multiple players I found this "aria-label" does not change the value to "Pause".

suggestion: and it is better to add class "is-playing" and something like this when the player starts playing.

Hi,

I was wondering, would it be possible to add keyboard support to the play/pause button?

I've added tabindex="0" to class="play-pause-btn" this includes it in the tab sequence, but pressing return doesn't play/pause the audio.

Could you also add aria-pressed="false" and aria-pressed="true" if class="play-pause-btn"has been pressed or not.

This would improve the accessibility of Green audio player.

Hello, I'm trying to figure out a way to record the number of plays/downloads to a database. Originally I was going to use a PHP script to handle the file delivery (i.e. point the player to a PHP script instead of an audio file) but this causes issues for some people during playback so now I'm looking to see if there's a way to integrate it into the player itself but I'm unfamiliar with JavaScript enough to know where to edit it. I tried using an external script to detect when the buttons are pressed (via getElementsById, which I did add an id to the play-pause-btn) but with no luck there either. Any assistance is appreciated. Thank you.

Example of the MySQL query:
UPDATE table SET downloads=(downloads+1) WHERE filename='sample.mp3'

Attempted external script:
document.getElementsById('playPauseBtn').onclick = function() { alert("Button was clicked"); }​;​

Audio player is inactive after committed on github, but all work proper using live Server. Why is it so?
Im using only HTML. no JS or other

Hello there,

Really love the work you've done on this audio player. I've had issues with the horizontal not working when the width of the window changes. While it works fine on my macbook, my monitors don't seem to work. I'm assuming it has something to do with the offsetLeft function? Have you run into any issues like this?

Hello,
I arrive here because so far I could not get any help with this.
I am building with Wbuilder a site where I use quite a lot of GAPlayers. In fact I upgraded because I wanted to subsitute GAPlayer to HTML5 player for the sake of responsivity and esthetic too.
But the fact is it doesn't display well with layout grids, which is what I use.
Overlapping, dimension not symetrical to other objects of the page.
You would be so kind if you could have a look and tell me what you see is wrong (hoping I understand!). Some examples

https://www.khenpo.fr/dent_blanche.html

https://www.khenpo.fr/chant-de-sahara.html

Also, in mobile portable -at least my old Iphone 4s- it doesn't look good either. Missing a piece or this kind of thing.
I sus pect GAPlayer was not designed for layout grids. So, be kind enough to tell me how I should use, taking into account my project.

Thank you for your time.

I'd like to be able to change the volume of the player on mobile. I've got it to show on mobile but it doesn't work. Is there a way to make this possible? Or a place I can start with it?

Hey, great job on the player it's been very useful and easy to implement.

Ran across a problem though. With mp3 streams from links, audio duration shows up as Infinity:Nan or NaN:Nan depending on browser.

Since the mp3 stream has no defined ending moment (continuous), is there a way to remove the total duration on them, and also adjust the cursor movemen t (stuck at beggining)?

Thanks !

Hi, thanks for looking into and fixing the last issue I raised.

I've tested the player in Internet Explorer 11 (multiple-instance.html) and I've hit a compatibility issue. I was wondering if you could perhaps support IE 11?

Viewing the player in IE 11 triggers this error: Object doesn't support property or method 'forEach'

After a quick Google search I found a 'forEach' fix for IE 11 on StackOverflow.

Adding this code

// Function to make IE9+ support forEach:
        (function() {
            if (typeof NodeList.prototype.forEach === "function")
                return false;
            else
                NodeList.prototype.forEach = Array.prototype.forEach;
        })();  

inside the <head> before the green player script appears to fix the forEach problem -forEach error is no longer listed in debugger.

Unfortunately, another error is triggered:

Object doesn't support property or method 'from'

Is there any chance you could look into this?

hi
i am trying to use your player with <audio preload="none">
preload="none" causes that play button never shows because of loading spinner

it seems that calling
this.hideLoadingIndicator();
in GreenAudioPlayer object constructor resolves this issue

also i have question if could be possible to play mp3 file which is splited into chunks

Love the player, look forward to maybe using it for our company to replace the ugly browser defaults. Tried setting up a proof of concept and had a few questions:

1. My proof of concept is wonky, despite containing the JS and CSS (I selected View Compiled CSS from the codepen): https://app-stage.podcraft.com/test/audio-player/example.htm. Any idea what's happening there?

2. I'm not super familiar with SCSS. I'm using Laravel and so have the ability but haven't had to do so for an external library. Any tips there?

3. Any plans to host the JS/CSS on a CDN?

The regex check which is currently used to recognise a device is:

this.isDevice = /ipad|iphone|ipod|android/i.test(window.navigator.userAgent.toLowerCase()) && !window.MSStream;

This is not sufficient for iOS 13+ because the user agent string no longer contains "iPhone" or "iPad". See this answer: https://stackoverflow.com/a/58065241/5284180

The solution is to update the check to:

this.isDevice =
      (/ipad|iphone|ipod|android/i.test(
        window.navigator.userAgent.toLowerCase()
      ) ||
        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) &&
      !window.MSStream;

I am raising this as an issue because I don't have the time right now to make the actual fix. If someone can pick it up, it would be great.

updateVolume() {
        this.volumeProgress.style.height = `${this.player.volume * 100}%`;
        if (this.player.volume >= 0.5) {
            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';
        } else if (this.player.volume < 0.5 && this.player.volume > 0.05) {
            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';
        } else if (this.player.volume <= 0.05) {
            this.speaker.attributes.d.value = 'M0 7.667v8h5.333L12 22.333V1L5.333 7.667';
        }
    }

Hi, how are you? First thing first, great project! 😄
I have a question for you, where can I find some documentation related to those strings you are using?
I'd like to create a React version of this player, and reading the code I came across this values which I couldn't find any details about them yet.

Thanks!

Hi,
I am using green players with React and I get:

/node_modules/green-audio-player/src/js/main.js:565
export default GreenAudioPlayer;

SyntaxError: Unexpected token 'export'

when using it ...
Do you know where this is coming from?

Thanks!

Hi

Would it be possible to add an option to hide the volume control via the script?

I love this player, but when set to autoplay the playPauseBtn does not change to show pause icon. I also can't find option to change playPauseBtn and Volume button colors, can change volume button color when clicked.

Hello,

first of all, Thanks for this audioPlayer. Can u edit your Documentation about Style with more inputs, how can i change the style?

I would like to know, how can i change my svg-Play-Button with another svg?
The SVG use in JavaScript and i would like change it in *css-File, if i press play and pause__Button

Yes - very strange problem.

The Play button does not appear on mobile connection. No problem on Wifi connection with the same device.
Testet on different Android devices with 3 different Browsers.

I was able to fix the problem temporarily when i set preload to none.

Yes, the type of network connection has nothing to do with the content and so on...... but wifi on: playbutton. Wifi off and reload: no playbutton. But the player (time...) appear on both. Also the mp3-file is only about ~100kb so this is no slow connection problem.
It's also happened on the online demo.

Maybe its a Browser Problem, idk if browsers check the art of connection and replace things, but the player shows up without playbutton so something is strange there.

When using Bootstrap 4 the progress pin is hidden and scrubbing won't work properly. This will solve the issue:

.progress {
    overflow: visible !important;
}

fixed. I don't see how to delete this.

Hi,

I'm wondering if it's possible to use presigned URI's from Amazon S3 in Green Audio Player? It looks like it's not, but wanted to check here first...

Thanks

Osu

Hello,

in Chrome (v84.0.4147.89), the click on the download button open audio html5 player.

Thanks for creating such a great audio player!

I've noticed an issue with the scrubber, it doesn't scrub if the parent element is set to position: relative;

I'm using the demo file multiple-instance.html

I've edited it below to show the issue:

The scrubber in ready-player-1 won't work, ready-player-2 works fine.

I've added a class .demo to style, and wrapped ready-player-1 in <div class="demo">

The layout I'm trying to use the player with depends on the parent div using position: relative;

Hope you can recreate and possibly fix?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Green Audio Player</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../dist/css/green-audio-player.css">
    <style>
        html, body { height: 100%; }

        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #F8FFAE;
            background: -webkit-linear-gradient(-65deg, #43C6AC, #F8FFAE);
            background: linear-gradient(-65deg, #43C6AC, #F8FFAE);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .ready-player-1, .ready-player-2 {
            margin: 24px 0;
        }
        .demo {
            /*This breaks the audio scrubber*/
            position: relative; 
        }
    </style>
</head>
<body>
    <div class="demo">
        <div class="ready-player-1">
            <audio>
                <source src="audio/example-1.mp3" type="audio/mpeg">
            </audio>
        </div>
    </div>
    <div class="ready-player-2">
        <audio>
            <source src="audio/example-2.mp3" type="audio/mpeg">
        </audio>
    </div>

    <script src="../dist/js/green-audio-player.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            new GreenAudioPlayer('.ready-player-1', { stopOthersOnPlay: true });
            new GreenAudioPlayer('.ready-player-2', { stopOthersOnPlay: true });
        });
    </script>
</body>
</html>

I had this error :

TypeError Failed to set the 'currentTime' property on 'HTMLMediaElement': The provided double value is non-finite. 
    https://www.tresoraparis.fr/vendor/green-audio-player/green-audio-player.min.js:1:14169 u.value
``

Here are the device details :
![2022-05-02_08h50_20](https://user-images.githubusercontent.com/1957946/166195440-d4cb15e5-142d-4aa3-9310-344bb425780b.png)

Somethimes this happens:

When playing an Internet stream, the player pauses the music. How to make the Internet stream stop?

Hi,

I get a lot of "deprecated" dependencies errors... currently not useable. :(

I'm updating the source of an audio player based on a slider.

  // Set new audio link
  audioSrc.src = audioLink;
  // Reload player & set it to start
  player.load();

However, the load event does not reset the progress bar or the play button.

An alternative (less preferable) would be to have a destroy option, so I can create a new instance of the player