분류 Reactjs

UI를 포함한 React 오디오 플레이어 컴포넌트

컨텐츠 정보

  • 조회 441 (작성일 )

본문

다른 브라우저에서 일관된 UI / UX를 제공하는 오디오 플레이어 구성 요소


https://github.com/lhz516/react-h5-audio-player 


SVG 아이콘이 있는 Flexbox CSS. 모바일 친화적.


라이브 데모: Storybook

웹 사이트 예: hanzluo.com | Code

지원되는 브라우저 : Chrome, Firefox, Safari, Opera, Edge, IE 11


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 = () => (
  <AudioPlayer
    autoPlay
    src="http://example.com/audio.mp3"
    onPlay={e => console.log("onPlay")}
    // other props here
  />
);