Hello @lhz516 ,

I really like this player - nice and customizable.

I would like to request a new feature to fast forward and backward an audio, so that when forward/backward buttons are clicked it can be forwarded and backward up-to particular time interval.

Describe the bug
Forms that have this audio player rendered, will trigger form submission when one of the main control buttons are clicked.

Warning: You submitted a Formik form using a button with an unspecified `type` attribute.  Most browsers default button elements to `type="submit"`. If this is not a submit button, please add `type="button"`.

Can we have the type specified as "button" to prevent this from happening? e.stopPropagation() will not prevent this behavior from happening.

Suggested Fix:

<button
  aria-label={isPlaying ? 'Pause' : 'Play'}
  type="button" //  <-- Fix
  className="rhap_button-clear rhap_main-controls-button rhap_play-pause-button"
  onClick={this.togglePlay}
>
  {actionIcon}
</button>

Environment

Package version: "react-h5-audio-player": "^3.0.4",
React version: "react": "^16.8.2",
Browser and its version: Chromium
OS and its version: macOS Mojave 10.14.6 (18G95)

Sorry to bombard you with all these issues I'm creating 😄, I really appreciate your work though!

Steps to reproduce:

1. Right click anywhere on the progress bar or volume bar
2. Dismiss the context menu (left-click somewhere on the page)
3. Move mouse cursor around

Observed:
The knob continues to follow the cursor until an additional left-click is registered.

Expected:
The knob should not follow the cursor.

This also happens if you Right click > Inspect Element instead of dismissing the menu.

Browser and its version: Chrome 83.0.4103.23
OS and its version: macOS 10.15.5 Beta (19F62f)

from the W3 validator:

Error: Attribute volume not allowed on element audio at this point.

From line 945, column 2098; to line 945, column 2218

<audio src="my.mp3" title="my.mp3" volume="1" preload="auto">

Attributes for element audio:
Global attributes
src — Address of the resource
crossorigin — How the element handles crossorigin requests
preload — Hints how much buffering the media resource will likely need
autoplay — Hint that the media resource can be started automatically when the page is loaded
loop — Whether to loop the media resource
muted — Whether to mute the media resource by default
controls — Show user agent controls

I love this audio player! The only thing that I'm unable to accomplish is removing the border that shows up after clicking a button in the UI:

Before click:

After click:

Is it possible to remove the blue border? I cannot find a style override.

This is a feature request question.

W3C defined specs for Media Source Extensions and Encrypted Media Extensions. This specification allows JavaScript to dynamically construct streams for <audio>. It defines a MediaSource object that can serve as a source of media data for an HTMLMediaElement, instead of just passing a URL.

There are more advanced players like DASH, HLS, Shaka, etc. These are very complex video players that can play audio if the audio format is following their standard (dash .mpd manifest, or HLS .m3u8 manifest). But there is a use case for more simple and generic uses where the app using has its own logic for audio streams.

I think it would be good to be able to support the W3C standard in its most simple form, ie:

• enabling the use of MSE
• enabling Clear Key encryption events and callbacks

In practical terms this means:

• adding a callback for EME events encrypted, message, keystatuseschange
• adding mechanism to set the length display so we can show the track length
• enable seek functionality
• (maybe, not tested) correct the loaded progress bar to show properly the chunks that are loaded

I suggest minimal additions in the H5 player, as far as possible putting the MSE/EME logic on the consumer of the player. These changes would expand the use case of this player to consuming audio streams.

I am happy to implement this if you think might be useful. Happy to hear your thoughts.

I'm using useContext to update the media player from multiple pages within my app.
This works as it should, however when the app starts up for the first time, the src is set to an empty string. Once play is clicked, the information is updated on the media player (ie the image, name and audio time is visible) but the media is paused.
If I change to a different audio src after this, the media plays (as it should on src change).

Just wanting to find out if there is a way to have the media play on src change, when the previous src is either an empty string or undefined?

Was able to verify volume works on Android, but not iOS (Safari, Chrome or Firefox).
Is there a hole in iOS js apis that makes this impossible?

onload of player I want to stop autoPlay , but its not working as expected

Describe the bug
While music is stopped or playing, drag knob to the end. The total time increases by 1 second.
I was able to reproduce this issue on https://hanzluo.com/#music.

Browser and its version: Chrome 83.0.4103.23
OS and its version: macOS 10.15.5 Beta (19F62f)

The audio player V3 will mainly solve some historical issues and introduce a flexible layout feature.

• Drop support under React 16.3.0 so that createRef API and some new lifecycles can be used
• Drop support of IE10 since it had stopped being maintained by Microsoft after 1/14/2020
• onListen's argument will be changed from current time number to Event object
  • You can still get current time by event.target.currentTime
• Ultra flexible layout (Props name TBD)
  • custom action buttons which are sortable with built-in buttons

The default view of V3 will be exactly the same as V2. If you are already using React 16.3.0+, you almost don't need to migrate anything unless you used onListen props.

Feel free to give any suggestions.

It would be great to have type definitions in this, so that this can be used nicely within Typescript, instead of having to hack it around to import a javascript component.

What do you think about the idea of making it possible to use custom images as buttons?
I was for example thinking about using a 10-sec-fast-forward button (used by Netflix on iOS for example).

Any tips on how to implement that? Thank you so much again for this great product!

I have a List component which displays a list of options, let's say movie names. Once a movie is selected, details component should display audio player. The problem is that when I switch movies in the List, player starts autoplay although I specify autoplay as false or simply omit it. How can I prevent autoplay?
In addition, console displays errors:
index.js:1 Uncaught Error: The error you provided does not contain a stack trace.
at S (index.js:1)
at V (index.js:1)
at index.js:1
at index.js:1
at a (index.js:1)
S @ index.js:1
V @ index.js:1
(anonymous) @ index.js:1
(anonymous) @ index.js:1
a @ index.js:1
react-dom.development.js:1350 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. https://goo.gl/LdLk22

Hi there,

If I want to add icon, text inside AudioPlayer, is there a way to do this?

Hi, first of all thanks for you work on that component!

I have a use case where I want the skip forward and skip backward button to jump a different amount of time (as in some podcast players).

ex: forward 30 sec and backward 10 sec.

I was thinking something like that. I would be happy to submit a PR if that is something you are willing to add.

it is displaying infinity and Nan
why it is happening ?
once we played it, next time onwards works fine.. only first time plays this happens

                  <AudioPlayer
                    autoPlay
                    volume={false}  
                   src={this.state.src}
                    ref={(a) => this._audio = a}  
                />

like this i have created component

Way to play and pause

I need to implement my own play and pause. In my app, I'm using a mini player and I'm hiding the main audio-player. At the mini-player, you can see the title and play, pause button.
If clicked on the mini player it shows the main audio player(react-h5-audio-player)

I'm using this to get the ref

this.player = createRef()
<ReactAudioPlayer ref={this.player} />

At the UI if pause button is clicked I'm using
PlayerRef.current.audio.current.pause(); to pause the audio and it works
If clicked on the play button, I'm using
PlayerRef.current.audio.current.play(); but at this time the player ref is null. Is there any way to persist the ref? or is there any other way to do it?

Thanks in advance!

Hi,
I've been trying to load an api to put into the playlist such as your example. Perhaps I am a bit junior on react but I just tried to have a getaudiourl as a function on the object but because the api is a fetch I can't access the this object and I can't figure out the async syntax for functions in the current structure. My apologies if this seems like a junion problem.

Hi, I want to know if there is an event to manage the volume changed event.
in this way I can save the level and if I reload the page I don't have the max level volume.
Thank you very much
Angelo

I want to request supporting alternative layouts where the audio player cannot fit. Right now the width of the player is capped to 300px, even if its parent element may be smaller. This can cause it to look weird especially on smaller screens.

A related request, can you look into supporting a bare minimal layout, where the audio player is simply a Play/Stop button? No seek bar, no timestamps, no pause, no volume, etc. Press to play, press again to stop the player and reset position to beginning of track.

Then, as you resize the page it should transition from the minimal layout to the regular layout.

How to reproduce it
-Audio is pause or playing
-Click on skipControls
Audio starts or continues, but the icon changes to pause icon

Expected
Icon changes or continues to play icon

Environment

Package version: 3.0.0-rc.2
React version: 16.12.0
Browser and its version: Google Chrome 80.0.3987.132
OS and its version: Windows 10

First of all, thank you for the amazing library, I would like to ask for a UI feature to be able to show current time as (total time - current played time). For example, the audio is 2 min long, and then it is already played for 30 seconds, it should show "1:30"

For some reason my play button is getting cut off at the bottom. The relevant portion of my code:

<div style={{backgroundColor: "red", height: "200px"}}> <AudioPlayer autoPlay src="http://example.com/file.mp3" onPlay={e => console.log("onPlay")} // other props here /> </div>
Any ideas why this might be? At first I thought it was my parent container. However, I have now enlarged that as shown in the attached picture but still have the same problem.

Describe the bug

A clear and concise description of what the bug is, and how to reproduce. Screenshots are appreciated.

In short:
In my application the mediaplayer receives a filestream from the server, which can then be played. Instead of a direct link to the mp3, the mediaplayer receives a signed URL, that returns a binary audio/mpeg stream when requested. This is mainly to prevent file sharing outside the website and hotlinking. On iOS however, This works in 90% of the audio files, but in some cases the audio player doesn't seem to read the stream.

For example this radioshow recording:
https://www.radiomerlijn.nl/uitzending-gemist/transformatie-academie
Playback works fine when played in a desktop browser i.e. Chrome. But on iOS, the current time and duration remain blank.

On many of the other pages, the audio files are loaded and can be played in iOS and desktop browsers without any issues. For example on:
https://www.radiomerlijn.nl/uitzending-gemist/meditatie

The audio files are produced by the same audio software. I tried uploading the audio files with different filenames, and in the backend I tried different response headers (Content-Disposition: attachment; filename="audiofile.mp3"). But so far the results remain exactly the same.

Current content headers:

  $headers = array (
            'Accept-Ranges: 0-' . (filesize($path) - 1),
            'Content-Length:' . filesize($path),
            'Content-Type: audio/mpeg',
            'Content-Disposition: inline',
        );

Environment

Package version: 3.1.0
React version: 16.13.1
Browser and its version: Chrome and Safari for iOS
OS and its version: iOS 13.4.1

Hello, is it possible to play a radio stream without caching? When you press the pause, the downloaded data is cached in the player, and after you press the start button, they are played from the moment of pause, and not what is played in the radio stream.

Describe the bug

When I click the next button with the following code, no console long is sent. Additionally it only fast forwards 5 seconds.

    autoPlay
    loop
    footer
    ref={player}
    src="http://aivibes.s3.amazonaws.com/hip_hop/HipHop%20(10).mp3"
    onPlay={e => console.log("onPlay")}
    onClickNext={e => console.log("onNextClick")}
    onListen={e => console.log("onListenInterval")}
    onEnded={e => console.log("onEnd")}
    // other props here
  /> ````


My use case is I wanted to load an array of songs into the player for the next song, but arrays didn't seem to work, so I thought I can use the next and end of song events to load the next song. But neither or those events ever fire to run my functions. 

Hey great package, I was wondering if you guys were thinking of implementing an array of src audio files to be played together, or even if this is currently possible?

Thanks for your time

Describe the bug

I am using the component like this:

<AudioPlayer
          src=""
          showJumpControls={false}
          customVolumeControls={[]}
          customAdditionalControls={[]}
          layout="horizontal"
        />

To me there's too much spacing around the play button.

Package version: 3.0.5
React version: 16.13.1
Browser and its version: Chrome 83
OS and its version: macOS 10.15.5

Describe the bug

The X offset of the touch position when clicking on the scrub bar is wrong when the page is scrolled horizontally by any amount. It's easily reproducible in the demo CodePen linked in the README. Just make the component wider and the browser window small, then scroll horizontally and try to scrub.

Environment

Package version: 3.3.0
React version: 16.13.1
Browser and its version: latest Chrome and Safari
OS and its version: macOS 10.15.6

I tried pressing/dragging any part of the progress bar to skip through the audio, but every time I do that, the audio would just skip back to the beginning, which makes it impossible to navigate to the middle/later part of the audio...

Describe the bug

it doesn't listen to the play function correctly, it causes multi-audio played at the same time.

Environment

Package version: 2.4.2
React version: ^16.12.0
Browser and its version:

OS and its version:

Hello,

It is maybe something I am doing wrong but I have to ask, I have tried a lot to fix this with no luck.

I have a list of tracks on browse component, when I click on one, player component with react-h5 player in it, It fetched the audio source with GraphQl and provide to react-h5, everthing working as expected but when I click on menu back to track lists, playing stops and I get this warning in console "index.js:1 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method." . But if I use the Play/Pause button on keyboard the track plays again in background.
No warning when I pause the player and go back to track lists. But I can again use my keyboard to play the same track in the background. so the react-h5 does not unmount.

Thanks in advance

In here, if src changes, audio gets played auto even we say autoPlay is false.

We should either add one more condition like ... && autoPlay or completely disable this feature. Otherwise, in some cases, audios get played all the time.

For example; I regularly update components and when components updated, links get refreshed. Audio is same but each time update made, there is an unique encoded URL for each audio. So, with default, even if i select to not play audio automatically, its get played by this library because of this condition.

I've removed this on my repository and point the package there. I can create PR for this, if you want.

Just let me know which path should we follow here:

• a. adding one more condition
• b. completely remove this line

Thanks all for supporting this project. I haven't thought about this library can get more than 1000 downloads per week. That makes me feel I have the responsibility to make it better.

Here are V2.0.0 features I'm proposing:

• Stop using inline style. Use external scss instead. (Pure css will also be provided.)
  • Developers will be able to overwrite scss variables to overwrite styles
• Add options to enable/disable "Previous" and "Next" button, onClickPrevious and onClickNext will also be supported. However, a playlist component won't be included, developers need to implement their own playlist component, because I want this library to be more focus on the player itself
• Add option to enable/display "Volume" control, because volume won't be supported on some mobile OSs
• A11y support

Other features TBD. Feel free to discuss about it.

A project I'm working on has temporary media URL's to prevent hotlinking to media sources. The media URL is valid for 70 minutes, and after this the media URL returns a 401. I noticed that the audio player keeps retrying to load the data instead of aborting. I added the onError to catch this event, and show a friendly message that the media URLhas expired. but it does not seem to catch the error response. Or do I need to use the onPlayError event instead?

Regards,
Sander

Duration always shows as minutes:seconds e.g. 109:18 for a long duration > 1 hour
Would be great to display it in human readable form: 1:49:18 in hh:mm:ss format.

Is that something possible with the current props?

Scenario: seminar talks typically all around 1-2 hours

hi
I got audio variation is undefined when componentWillUnmount.

it happened in CurrentTime.js, Duration.js, ProgressBar.js, and VolumeBar.js when componentWillUnmount

and I change it to this, everything goes fine.

CurrentTime.js
`
_proto.componentWillUnmount = function componentWillUnmount() {
var audio = this.props.audio;

if( audio && this.hasAddedAudioEventListener ) {
  audio.removeEventListener('timeupdate', this.handleAudioCurrentTimeChange);
  audio.removeEventListener('loadedmetadata', this.handleAudioCurrentTimeChange);
  this.hasAddedAudioEventListener = false;
}

};
`

Duration.js
`
_proto.componentWillUnmount = function componentWillUnmount() {
var audio = this.props.audio;

if (audio && this.hasAddedAudioEventListener) {
  audio.removeEventListener('durationchange', this.handleAudioDurationChange);
  this.hasAddedAudioEventListener = false;
}

};
`

VolumeBar.js
`
_proto.componentWillUnmount = function componentWillUnmount() {
var audio = this.props.audio;

if (audio && this.hasAddedAudioEventListener) {
  audio.removeEventListener('volumechange', this.handleAudioVolumeChange);
  this.hasAddedAudioEventListener = false;
}
clearTimeout(this.volumeAnimationTimer);

};
`

ProgressBar.js
`
_proto.componentWillUnmount = function componentWillUnmount() {
var audio = this.props.audio;

if (audio && this.hasAddedAudioEventListener) {
  audio.removeEventListener('timeupdate', this.handleAudioTimeUpdate);
  audio.removeEventListener('progress', this.handleAudioDownloadProgressUpdate);
  this.hasAddedAudioEventListener = false;
}

clearTimeout(this.downloadProgressAnimationTimer);

};
`

please check it

Thanks a lot : )

my mistake. issue with node installation. please delete

i have used this library ,its worked fine in all the browsers of desktop and mobile devices but safari browser drag function not working

Hello,

Really like this player - nice and customizable.

Was trying to implement clicking event so that when you click on the progress bar, the indicator moves to that location and the play progress is updated.

Here's what I have but the slider indicator position is incorrect so maybe you can help:

bar.addEventListener('click', e => {
    console.log('bar clicked!')
    const target =
        e.target.nodeName === 'DIV' ? e.target.parentNode : e.target
    const width = target.clientWidth
    const rect = target.getBoundingClientRect()
    const offsetX = e.clientX - rect.left
    const duration = this.audio.duration
    const audio = this.audio
    const currentTime = (audio.duration * offsetX) / width

    this.setState({
        currentTime,
        duration,
        // barWidth,
        dragLeft: offsetX
    })
})

I think my math is wrong somewhere so hopefully you can point the way forward.

Thanks!

Hi, is there the onClick event on the play button?
Thank you very much

赞

Is there any way I can use it with soundCloud, or any other audio streaming?

If I pass:

 customIcons={{
  play: null,
  pause: null,
}}

The play/pause icon still shows up. I presume this is by design.

I want to control the player through other buttons on the UI.

Would it be possible to add a hideAllControls param that hides everything except the time/progress bar?

Hi, lhz516.
I was using this component with true autoplay status.
I was writing a program by starting VSCode with the screen displaying this component in the tab of the browser.

When I pressed ⌘ + s after pressing Backspace to fix and save the program, Auto Play happened.

Is this a bug?

Package version: 3.1.0
React version: 16.12.0
Browser and its version: Google Chrome 81.0.4044.138 (Official Build) (64 bit)
OS and its version: macOS Catalina 10.15.4

Thank You.

Hi, first thank you for this good player.

I am using CRA with node-sass and can't seem to find a way to override the SCSS variable.

I import the variables before react-h5-audio-player style like that :

import 'globals.scss';
import 'react-h5-audio-player/src/styles.scss';

where in my global.scss file I have :

$rhap_theme-color: #000000;

So as I understand it it should override the one defined in react-h5-audio-player/src/styles.scss because it has the default flag.

What's wrong ?

First of all, really great product!!
Using it on our website and it looks so nice and works really well (especially on mobile).
The only error we are getting from Sentry is

ReferenceError: TouchEvent is not defined.

I tried to reproduce and found that on Desktop (Safari and Firefox) the progress bar cannot be controlled. Meaning that clicking or sliding the progress bar has no effect. Chrome works though.
Just wanted to know, if that issue is new to you or if maybe I did something wrong while implementing it. Thanks a lot!