Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
material-ui-audio-player
Advanced tools
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://converter-audio-example-1.s3.eu-central-1.amazonaws.com/Russell%2C%2BMale%2B-%2BEnglish%2C%2BAustralian+(1)+(online-audio-converter.com).wav',
'https://converter-audio-examples.s3.eu-central-1.amazonaws.com/Russell%2C+Male+-+English%2C+Australian.mp3',
];
<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>;
src
Could accept audio link or array of audio links.
string
| array
width
Corresponds to style property width
.
100%
string
variation
Component view variation.
default
default
, primary
, secondary
string
download
Display download button (icon) with dropdown of available audio tracks for download.
false
boolean
autoplay
Corresponds to HTML audio autoplay
attribute.
false
boolean
elevation
Shadow depth. Corresponds to elevation
prop of Material Ui
Paper
component.
1
number
rounded
Rounded corners of the container. Corresponds to square
prop of Material Ui
Paper
component.
false
boolean
spacing
Spacing for root Grid
container. Corresponds to spacing
prop of Material Ui
Grid
component.
3
(2
- mobile)number
order
Order of Slider
and controls buttons.
standart
standart
, reverse
string
loop
Display loop button.
false
boolean
preload
Corresponds to HTML audio attribute preload
.
auto
string
useStyles
The attribute for customizing component styles. Accept the result of
makeStyles
function.
func
icons
Provide custom icon component from Material-ui icons for specific icon.
object
const icons = {
PlayIcon: PlayCircleFilledWhite,
ReplayIcon: Replay,
PauseIcon: PauseCircleFilled,
VolumeUpIcon: VolumeUp,
VolumeOffIcon: VolumeOff
}
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>;
1.1.6 - 2020-05-08
FAQs
Audio player for material ui design
The npm package material-ui-audio-player receives a total of 389 weekly downloads. As such, material-ui-audio-player popularity was classified as not popular.
We found that material-ui-audio-player demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.