728x90

 

Amplitudejs

https://github.com/serversideup/amplitudejs

 

GitHub - serversideup/amplitudejs: AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you w

AmplitudeJS: Open Source HTML5 Web Audio Library. Design your web audio player, the way you want. No dependencies required. - GitHub - serversideup/amplitudejs: AmplitudeJS: Open Source HTML5 Web A...

github.com

AmplitudeJS는 사용자가 웹 및 모바일용으로 꿈에 그리던 오디오 플레이어를 디자인할 수 있는 유연한 Javascript 라이브러리입니다. 오디오에 대한 최상의 경험을 원하는 아티스트는 사용자 지정 프로그래밍의 오버헤드에 대해 걱정하지 않고 모양과 느낌을 완전히 사용자 지정할 수 있습니다. AmpltidueJS는 HTML 5 오디오 요소의 기능을 활용하고 셔플링, 반복, 재생 목록 생성 등과 같은 기능을 추가하여 다음 단계로 끌어 올립니다.

 

 

APlayer

https://github.com/DIYgod/APlayer

 

GitHub - DIYgod/APlayer: Wow, such a beautiful HTML5 music player

:lollipop: Wow, such a beautiful HTML5 music player - GitHub - DIYgod/APlayer: Wow, such a beautiful HTML5 music player

github.com

아름다운 HTML5 뮤직플레이어

 

 

 

Green Audio Player

https://github.com/greghub/green-audio-player

 

GitHub - greghub/green-audio-player: Audio Player javascript library

Audio Player javascript library. Contribute to greghub/green-audio-player development by creating an account on GitHub.

github.com

오디오 플레이어 자바스크립트 라이브러리.

 

아래는 단일 플레이어 예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/greghub/green-audio-player/dist/css/green-audio-player.min.css">
</head>
<body>
   <h1>테스트</h1>
   
     <div class="ready-player-1">
        <audio crossorigin preload="none">
      <source src="./2023-02-27T16 08 43.120Z_1677481724829.wav" type="audio/mpeg" />
        </audio>
    </div>
    
<script src="https://cdn.jsdelivr.net/gh/greghub/green-audio-player/dist/js/green-audio-player.min.js"></script>

<script>
      document.addEventListener('DOMContentLoaded', function() {
            new GreenAudioPlayer('.ready-player-1',
									 { showTooltips: true, 
									  showDownloadButton: true, 
									  enableKeystrokes: true 
									 }
								);
        });
</script>
</body>
</html>

 

Scm Music Player

https://github.com/cshum/scm-music-player

 

GitHub - cshum/scm-music-player: Seamless music for your website. HTML5 music player with continuous playback cross pages.

Seamless music for your website. HTML5 music player with continuous playback cross pages. - GitHub - cshum/scm-music-player: Seamless music for your website. HTML5 music player with continuous play...

github.com

귀하의 웹사이트를 위한 완벽한 음악. MP3, Youtube, SoundCloud, RSS 재생 목록에서 HTML5/Flash를 지원합니다.

 

 

Rythm.js

https://github.com/Okazari/Rythm.js

 

GitHub - Okazari/Rythm.js: A javascript library that makes your page dance.

A javascript library that makes your page dance. Contribute to Okazari/Rythm.js development by creating an account on GitHub.

github.com

페이지를 춤추게 만드는 자바스크립트 라이브러리.

 

Audiolib.js

https://github.com/jussi-kalliokoski/audiolib.js

 

GitHub - jussi-kalliokoski/audiolib.js: audiolib.js is a powerful audio tools library for javascript.

audiolib.js is a powerful audio tools library for javascript. - GitHub - jussi-kalliokoski/audiolib.js: audiolib.js is a powerful audio tools library for javascript.

github.com

audiolib.js는 자바스크립트를 위한 강력한 오디오 도구 라이브러리입니다. audiolib.js는 실험적인 브라우저 오디오 API 간의 일관된 API를 위한 sink.js와 같이 브라우저에서 오디오 개발자의 삶을 훨씬 쉽게 만들어주는 몇 가지 도구와 함께 번들로 제공됩니다. 이를 보완하기 위해 audiolib.js는 WAV 인코더/디코더인 pcmdata.js도 번들로 제공하므로 Sink.js를 사용하여 만든 녹음을 사용자가 저장할 수 있는 WAV 파일로 전환할 수 있습니다. 다른 도구로는 AudioWorker API가 있습니다. 이 API를 사용하면 문자열 또는 함수에서 웹 작업자를 생성하고 audiolib.js 및 해당 플러그인을 번들로 묶을 수 있으며 모두 작업자에서 사용할 수 있습니다.

 

 

React Music Player

https://github.com/lijinke666/react-music-player

 

GitHub - lijinke666/react-music-player: [Stop the maintenance] Maybe the best beautiful HTML5 responsive player component for re

[Stop the maintenance] :musical_note: Maybe the best beautiful HTML5 responsive player component for react :) - GitHub - lijinke666/react-music-player: [Stop the maintenance] Maybe the best beautif...

github.com

아마도 React를 위한 최고의 HTML5 반응형 플레이어 구성 요소일 것입니다.

 

Player.js

https://github.com/embedly/player.js

 

GitHub - embedly/player.js: Control embedded video and audio across multiple providers

Control embedded video and audio across multiple providers - GitHub - embedly/player.js: Control embedded video and audio across multiple providers

github.com

여러 제공업체에서 임베디드 비디오 및 오디오를 제어합니다.

 

 

Podlove Web Player

https://github.com/podlove/podlove-web-player

 

GitHub - podlove/podlove-web-player: Podlove Web Player is a Podcast-optimized, HTML5-based audio player based on VueJS.

Podlove Web Player is a Podcast-optimized, HTML5-based audio player based on VueJS. - GitHub - podlove/podlove-web-player: Podlove Web Player is a Podcast-optimized, HTML5-based audio player based ...

github.com

Podlove Web Player는 VueJS를 기반으로 하는 Podcast에 최적화된 HTML5 기반 오디오 플레이어입니다. WordPress 플러그인으로 사용하거나 정적 HTML/JavaScript 컨텍스트 내에서 사용할 수 있습니다.

 

 

Paper Audio Player

https://github.com/gorork/paper-audio-player

 

GitHub - gorork/paper-audio-player: A custom audio player with paper material style

A custom audio player with paper material style. Contribute to gorork/paper-audio-player development by creating an account on GitHub.

github.com

종이 소재 스타일의 맞춤형 오디오 플레이어.

 

 

Wavesurfer.js

https://wavesurfer-js.org/

 

wavesurfer.js

Backward Play / Pause Forward Toggle Mute

wavesurfer-js.org

웨이브 형태의 오디오 시각화 기능을 제공하며, 사용자 지정 가능한 UI 컨트롤러와 함께 제공됩니다.

 

Plyr

https://github.com/sampotts/plyr

 

GitHub - sampotts/plyr: A simple HTML5, YouTube and Vimeo player

A simple HTML5, YouTube and Vimeo player. Contribute to sampotts/plyr development by creating an account on GitHub.

github.com

완전한 오디오 및 비디오 플레이어 UI를 제공합니다. 사용자 지정 가능하며, 반응형으로 디자인되어 다양한 장치에서 사용할 수 있습니다.

728x90

'STUDY > JavaScript' 카테고리의 다른 글

[JS] entries()메서드로 FormData 객체 데이터 조회하기  (0) 2023.03.22
[JS] FormData 설명 정리  (0) 2023.03.14
[JS] Promise에 대해 알아보자  (0) 2023.02.01
[JS] 동기비동기 · 콜백 이해하기  (0) 2023.02.01
[JS] 자바스크립트 내장함수  (0) 2023.01.19

티스토리툴바