Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/Werter12/material-ui-audio-player below:

Werter12/material-ui-audio-player: Audio player react component for material ui design

Audio player for material ui design developed with react.js. Requires Material UI 4 version.

Demo: https://werter12.github.io/material-ui-audio-player/

Just add your audio link to src and your ready to go.

import { createMuiTheme, ThemeProvider } from '@material-ui/core';
import AudioPlayer from 'material-ui-audio-player';

const muiTheme = createMuiTheme({});

<ThemeProvider theme={muiTheme}>
  <AudioPlayer src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" />
</ThemeProvider>;

A bunch of props will help to customize component.

import { createMuiTheme, ThemeProvider } from '@material-ui/core';
import AudioPlayer from 'material-ui-audio-player';

const muiTheme = createMuiTheme({});

const src = [
  'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
  'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.wav',
];

<ThemeProvider theme={muiTheme}>
  <AudioPlayer
    elevation={1}
    width="100%"
    variation="default"
    spacing={3}
    download={true}
    autoplay={true}
    order="standart"
    preload="auto"
    loop={true}
    src={src}
  />
</ThemeProvider>;

Could accept audio link or array of audio links.

• type: string | array
• required

Corresponds to style property width.

• default: 100%
• type: string

Component view variation.

• default: default
• options: default, primary, secondary
• type: string

Display download button (icon) with dropdown of available audio tracks for download.

• default: false
• type: boolean

Display volume control button (icon).

• default: true
• type: boolean

Corresponds to HTML audio autoplay attribute.

• default: false
• type: boolean

Shadow depth. Corresponds to elevation prop of Material Ui Paper component.

• default: 1
• type: number

Rounded corners of the container. Corresponds to square prop of Material Ui Paper component.

• default: false
• type: boolean

Spacing for root Grid container. Corresponds to spacing prop of Material Ui Grid component.

• default: 3 (2 - mobile)
• type: number

Order of Slider and controls buttons.

• default: standart
• options: standart, reverse
• type: string

Display loop button.

• default: false
• type: boolean

Corresponds to HTML audio attribute preload.

• default: auto
• type: string

This callback triggers when the player started play after pause or initial state

• type: func

This callback triggers when the player paused after the play

• type: func

This callback triggers when the player finish playing

• type: func

This callback triggers when you close the player with help of the close button displayCloseButton

• type: func

This prop helps to customize time displaying. double - means that two timers will be present. single - only one.

• default: double
• options: double, single
• type: string

This prop helps to position single timer before (start) or after (end) the slider.

• default: start
• options: start, end
• type: string

The attribute for customizing component styles. Accept the result of makeStyles function.

• type: func

Provide custom icon component from Material-ui icons for specific icon.

• type: object
• default:

  const icons = {
    PlayIcon: PlayCircleFilledWhite,
    ReplayIcon: Replay,
    PauseIcon: PauseCircleFilled,
    VolumeUpIcon: VolumeUp,
    VolumeOffIcon: VolumeOff,
    CloseIcon: Close,
  }

Display slider with time.

• default: true
• type: boolean

Display close button (icon).

• default: false
• type: boolean

Prop for controling mute state of the audio and volume button. (By default is null. When any boolean passed, the mute state for button and audio will be completly controlled from external source)

• default: null
• options: true, false
• type: boolean

Callback for getting access to HTML audio player instance and dispatch react function (from useReducer) in order to change player's state directly (programmatically). Check out Controlled AudioPlayer section in the storybook.

• type: func
• function_params:_ player, dispatch

import { createMuiTheme, ThemeProvider } from '@material-ui/core';
import AudioPlayer from 'material-ui-audio-player';

const muiTheme = createMuiTheme({});

const useStyles = makeStyles((theme) => {
  return {
    root: {
      [theme.breakpoints.down('sm')]: {
        width: '100%',
      },
    },
    loopIcon: {
      color: '#3f51b5',
      '&.selected': {
        color: '#0921a9',
      },
      '&:hover': {
        color: '#7986cb',
      },
      [theme.breakpoints.down('sm')]: {
        display: 'none',
      },
    },
    playIcon: {
      color: '#f50057',
      '&:hover': {
        color: '#ff4081',
      },
    },
    replayIcon: {
      color: '#e6e600',
    },
    pauseIcon: {
      color: '#0099ff',
    },
    volumeIcon: {
      color: 'rgba(0, 0, 0, 0.54)',
    },
    volumeSlider: {
      color: 'black',
    },
    progressTime: {
      color: 'rgba(0, 0, 0, 0.54)',
    },
    mainSlider: {
      color: '#3f51b5',
      '& .MuiSlider-rail': {
        color: '#7986cb',
      },
      '& .MuiSlider-track': {
        color: '#3f51b5',
      },
      '& .MuiSlider-thumb': {
        color: '#303f9f',
      },
    },
  };
});

<ThemeProvider theme={muiTheme}>
  <AudioPlayer
    width="500px"
    useStyles={useStyles}
    src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
    loop={true}
  />
</ThemeProvider>;

• root
• playIcon
• replayIcon
• pauseIcon
• volumeIcon
• muteIcon
• mainSlider
• volumeSliderContainer
• volumeSlider
• downloadsIcon
• pauseIcon
• loopIcon
• progressTime
• downloadsContainer
• downloadsItemLink
• downloadsItemText

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4