요즘 만들고 있는 mp3플레이어 애드온입니다.
XE를 사용하면서 mp3첨부한 것을 어떻게 하면 이쁘게 출력할 수 있을까를 고민했었는데, 결국 이런 애드온을 만들게 되네요.
현재까지 구현한 기능은 다음과 같습니다.
1. 게시글 파일 첨부시 mp3 파일의 id3태그 자동 분석.
2. mp3파일이 있을 경우 자동으로 플레이어 띄우기.
3. MediaSession 사용.
4. 실시간 스트리밍.
5. url 암호화.
6. 크롬에서 F12켜도 다운로드 링크가 뜨지 않음.
7. 스트리밍시 재생에 불필요한 ID3태그는 전송하지 않음.
8. ck에디터 mp3링크 본문 삽입시 자동으로HTML5 플레이어로 변환.
이제 80%정도 완성해서 아마 조만간 배포가 가능할 것 같습니다.
피드백은 언제든 환영입니다.
| 첨부 |
|---|
procFileDownload 파일 다운 버튼도 있으면 좋을 것 같아요! 플레이 옆에 다운 버튼이미지로
사운드 클라우드처럼 wave표현하는 방법은 애드온으로 안되겠죠?
waveform 같은 경우 mp3를 PCM데이터로 변환하여 waveform 수치를 가져와야 하는데 방법은 2가지가 있습니다.
1. 백엔드에서 자바스크립트로 WebAudio API를 이용하여 mp3데이터를 몽창 불러와서 변환.
2. 서버에서 ffmpeg를 사용하여 mp3 -> PCM 변환후 waveform데이터를 뽑아냄.
각 방법마다 장단점은 있지만 1번 같은 경우 mp3를 재생할 때마다 mp3통파일을 가져와야 한다는 문제점이 있고,
2번 같은 경우엔 ffmpeg라는 별도의 프로그램이 필요하다는 것입니다.
1번은... 리소스 낭비가 너무 심하게 되서 일단 배제하고..
만약 한다면 2번을 사용해야 하는데, 2번을 충족하는 오픈소스 플레이어를 아직 찾지 못하였습니다.
2번 플레이어를 만약 제가 만든다면 HTML5 canvas를 이용하여 플레이어를 일일이 수제작 하여야 한다는 것인데 아마 제가 저것까지 만든다면 시간이 너무 소요가 될 것 같아 어려울 것 같습니다.
결론은 애드온으로 구현은 가능하다만 저에겐 그 정도의 시간적 여유가.. ㅠㅠ
현재 2번의 경우 저희는 스트리밍 출력시 ffmpeg 로 저음질 인코딩하고 jwplayer로 노출하고 있었는데
pcm 파일로 하는 것이었군요!
system("ffmpeg -i $input_file -acodec libmp3lame -ac 2 -ab 96k -ar 48000 $output_file -loglevel quiet");
$output_file = $this->buildEncodedFilePath($input_file);
ffmpeg해도 player가 wave를 지원하는 기능이 없나보군요 -_ㅠ
사실 모든 플레이어에선 mp3를 재생하는 과정에서 PCM으로 변환합니다. ㅋㅋ
사이트에서 ffmpeg로 저음질로 변환거에 꿀팁 하나 드리자면
mp3로 변환하는것 보단 mp4(m4a) he-aac 코덱을 사용하시는걸 추천드립니다.
진짜 압축률이 mp3에 비해 엄청 좋아서 mp3 96kbps이면 he-aac 64kbps로도 아마 충분히 커버가 될거에요.
https://dev11.dnip.co.kr/ 여기 플레이어 오른쪽 우클릭-> * Stats for nerds 클릭하시면 음질 선택하는게 있는데,
mp3에서 48kbps면 정말 못들어 줄 정도지만 he-aac는 48kbps로 선택해도 그럭저럭 들어줄 만하니 참고하세요
