The callback to be used when seek happens (this is a key of the mse prop) The complete duration of the MSE audio chunks together (this is a key of the mse prop) 'auto' means when duration is greater than one hour, time format is hh:mm:ss, otherwise it's mm:ssĪ configuration object to overwrite the default aria-label on the action buttonsĪ configuration object so the player can play audio chunks, MSE streams and encrypted audio (See section about Media Source Extensions in this Readme) Time format for both current time and duration. Indicates the interval (ms) to call the onListened prop during playbackĭefault display for audio's current time before src's meta data is loadedĭefault display for audio's duration before src's meta data is loaded Indicates the interval (ms) that the progress bar UI updates, Indicates the progress jump step (ms) when clicking rewind/forward button or left/right arrow key Indicates the volume jump step when pressing up/down arrow key, volume range is 0 to 1ĭeprecated, use progressJumpSteps. Play audio after src is changed, no matter autoPlay is true or false Show filled (already played) area on progress bar The controls attribute defaults to false and should never be changed to true because this library is already providing UI. More native attributes detail: MDN Audio element Props HTML Audio Tag Native Attributes Props They can be turned off by setting hasDefaultKeyBindings prop to false Key binding log ( "onPlay" ) } // other props here / > ) Keyboard shortcuts (When audio player focused) Import AudioPlayer from 'react-h5-audio-player' import 'react-h5-audio-player/lib/styles.css' // import 'react-h5-audio-player/lib/styles.less' Use LESS // import 'react-h5-audio-player/src/styles.scss' Use SASS const Player = ( ) => ( console. So creating your own controls ensures a consistent look for the controls across all browsers. However, that can be a good approach, because the default controls look different among various browsers. If you don't specify this attribute, no controls will appear - and you will instead have to create your own controls and program their functionality using the Media API (see below).
Here we define an element with multiple sources - we do this as not all browsers support the same audio formats.(Currently, browsers that support mp3 also support mp4 audio). MP4 files typically contain AAC encoded audio.
Note: You can also use an MP4 file instead of MP3.