심플 MP3 플레이어 애드온 (with MP4)

0.2.0 이하 버전에서 보안 문제가 발견되었습니다. 0.2.1 이상 버전으로 업데이트 부탁드립니다.

이 애드온은 게시글에 mp3, m4a, ogg, flac파일이 첨부되어 있을 경우 자동으로 플레이어를 생성해주는 프로그램입니다.

사용자가 게시글에 파일을 첨부하면 자동으로 오디오 파일의 태그를 자동으로 분석하며,

분석된 태그 값은 플레이어에 표시됩니다.

또한 브라우저에서 MediaSession API를 지원하는 경우 위 이미지와 같이 알림창에서 오디오 제어가 가능합니다.

만약 CK에디터에서 mp3파일 첨부 후 해당 파일을 본문에 삽입할 경우 HTML5 플레이어로 자동 변환시킬 수 있으며,

플레이어는 음원 무단 추출을 예방할 수 있도록 저장 버튼은 비활성화 되어 있습니다.

(애드온 설정에서 'mp3링크 플레이어로 변환' 활성화. mp3파일만 해당)

1.1.0 버전에서 비디오 파일 본문 삽입 기능이 추가되었습니다.

ck에디터에서 첨부한 비디오 파일이 만약 본문에 링크 형태로 삽입되어있다면 자동으로 비디오 태그로 변환해줍니다.

만약 오디오가 없는 비디오 파일은 자동으로 gif모드로 재생시켜 줍니다.

자동재생, 반복 재생은 애드온 설정에서 수정할 수 있습니다.

또한, 반응형에 맞춰 본문 크기가 변경될 경우 자동으로 동영상도 본문 너비 비율에 맞춰 리사이징이 됩니다.

(해당 기능 사용시 애드온 설정에서 'HTML5 플레이어 전체 설정 -> mp3, 동영상 링크 플레이어로 변환',

'기타 설정 : 동영상 설정 -> 동영상 사용'이 활성화되어 있어야 합니다.)

기능:

1. mp3, m4a, ogg, flac, mp4, webm 재생 지원.

2. (1)의 파일 자동 태그 분석.

3. 단순 프로그래시브 방식이 아닌 네이버 뮤직, 지니뮤직과 같이 mp3파일 실시간 스트리밍 지원. (음원 무단 추출방지)

4. mp3 암호화 재생 기능 제공.

5. MediaSession 지원

6. 본문에 삽입된 오디오, 비디오 파일 링크 -> HTML5플레이어 변환

7. 자동으로 다음 글의 곡을 이어서 재생시켜주는 AutoStation 기능 (BluePlyer사용시)

8. 재생/일시정지시 Fade In/Out 기능 (BluePlyer사용시)

9. 본문에 비디오 파일 자동 삽입 혹은 원하는 위치에 삽입.

10. 오디오가 없는 mp4, webm파일은 gif처럼 출력.

11. 게시글에 섬네일로 사용할 파일이 없는 경우 오디오 파일의 앨범 커버를 섬네일로 지정.

12. 동영상 섬네일 생성 기능 추가.

주의사항 (사용 전 꼭 숙지하여주세요):

1. 이 애드온은 다음과 같은 환경에서 테스트되었습니다.

     - xe 1.8.27 (php 5.4)

     - xe 1.11.5 (php 7.2, win64)

     - xe 1.11.5 (php 7.0)

2. 애드온 작동에 관련된 파일들은 ./files/simple_mp3_player 에 생성이 됩니다.

3. APlayer는 기본적으로 가로 크기가 본문 너비의 100%로 설정되어 있습니다. (fixed 버전 제외)

       따로 게시판 스킨단에서 사이즈 조절이 필요 할 수 있습니다.

4. ./addons/simple_mp3_player에 쓰기 권한이 없을 경우 URL암호화가 적용되지 않습니다.

5. simple_mp3_player 애드온 폴더에 __password.php같은 경우 URL암호화를 위해 자동으로 생성되는 파일입니다.

6. mp3파일 링크를 자동으로 HTML5 플레이어로 변환하는 기능은 ck에디어테서 작동 테스트를 하였으며, 그 외 에디터(xpresseditor 등)에선 지원하지 않을 수 있습니다.

7. mp3링크 -> HTML5플레이어 변환같은 경우 IE10까지 지원합니다.

8. 모든 파일은 플레이어 최초 로딩시 분석에 의해 조금의 딜레이가 발생 할 수 있습니다만, 파일 갯수가 많을수록 지연시간이 길어질 수 있습니다. (통상적으로 4분짜리 mp3파일 20개에 2초)

9. mp3파일의 경우 실시간 스트리밍을 위해 정밀 분석을 합니다. mp3파일의 프레임이 중간에 깨져있을 경우 정상적인 재생이 불가능할 수 있습니다.

10. 태그가 UTF8이 아닌 경우 깨져서 나올 수 있습니다. 이런 경우 mp3tag와 같은 프로그램으로 수정 적용하시면 해결됩니다.

11. 모바일 안드로이드의 경우 절전모드일때 스트리밍중인 앱(크롬, 삼성 브라우저 등)의 백그라운드 데이터 사용이 되지 않을 경우 원할한 스트리밍이 어려울 수 있습니다.

12. BluePlayer같은 경우  ./common/js/plugins/ui/jquery-ui.min.js 파일이 있어야 동작합니다.

13. 동영상 섬네일 추출 기능을 사용하려면 애드온 설정 항목의 "ffmpeg 경로" 값이 있어야 합니다.

깃허브 :  https://github.com/huhani/xe-simple-mp3-player

데모 페이지 :  https://dev17.dnip.co.kr/index.php?mid=ncs&document_srl=1409

수정 내역

1.1.2.  - 동영상 섬네일 추출 기능 추가. (ffmpeg 필요)

            - 동영상 섬네일 추출시 섬네일 추출 위치 지정 가능(ex: 처음으로부터 5초 이후 장면을 섬네일로 추출)

            - 관리자가 아닌 회원이 오디오 비디오 링크를 삽입하였을 경우 비디오, 오디오로 변환이 되지 않는 문제 수정.

            - mp3 실시간 재생시 버퍼 암호화 지원.

            - video 재생시 playsinline 속성 추가할 수 있게 수정.(iOS에서 동영상 재생시 자동으로 전체화면이 되는 현상 방지)

            - 동영상 자동 본문 삽입 활성화시, video가 이미 본문에 적용되어 있을 경우 추가 삽입되는 문제 수정.

            - audioplayback.php를 이용한 mp3 실시간 재생시 브라우저에서 캐시가 적용되게끔 수정.

1.1.1.  - MediaSource Extension을 이용하여 재생할 때 브라우저에서 Fetch API를 사용 가능할 경우, XHR대신 Fetch를 사용하게 변경.

1.1.0  - 게시글에 mp4, webm파일을 첨부하였을 경우 본문에 삽입 기능 추가.

          - 오디오가 없는 비디오 파일은 자동으로 gif파일처럼 출력되는 기능 추가.

          - 브라우저 창의 크기가 변경되었을 경우 반응형으로 본문 사이즈 너비에 맞게 자동 리사이징.

          - 실시간 mp3 재생시 기본버퍼 50초로 상향 수정.

1.0.0  - MP3태그의 앨범 커버를 게시글 섬네일로 지정할 수 있는 기능 추가.

          - BluePlayer에서 원하는 곡의 앨범커버를 섬네일로 지정할 수 있는 기능 추가.

          - MP3 실시간 재생중 이미 버퍼가 있는 위치에다 seek시 노이즈 발생 제거.

          - MP3 실시간 재생 버퍼 캐시 기능 추가.

0.2.4  - 통합 플레이어 기본값을 BluePlayer에서 APlayer로 변경.

          - MP3 실시간 재생에서 SegmentDuration 임의로 변경 가능하게 수정.

          - MP3 실시간 재생시 SegmentDuration크기를 5초에서 10초로 수정.

          - 애드온 설정부분 수정.

          - 만약 오디오 파일에 앨범 커버 정보가 없을 경우 게시글 섬네일 표시 가능하게 수정.

          - 기타 보안 문제 수정.

0.2.3  - BluePlayer 일부 가사 행이 누락되는 문제 수정

           - BluePlayer 앨범명 출력(설정에서 활성화 하여야 함)

0.2.2  - BluePlayer css a 노드 vertical-align: initial속성 설정

           - BluePlayer 반응형 문제 수정(브라우저 리사이징시 트랙 리스트가 하단으로 가버리는 문제 해결)

0.2.1  - 보안 패치

           - XE 구버전(1.8) jQuery UI css 호환작업

0.2.0  - 가사를 불러오는 과정에서 잘못된 권한 체크로 인해 불러오지 못하는 문제 수정

           - BluePlayer 추가

           - Fade In/Out 기능 추가

           - AutoStation 기능 추가

           - 애드온 설정 항목 오자 수정

           - 곡 파일의 태그가 없어 파일명을 출력할 경우 확장자 제거 가능하게 수정

           - MediaSource에서 Duration을 벗어난 지점을 seek시 에러 해결

           - MP3 실시간 스트리밍 버퍼 수동 설정 기능 추가

           - MP3 실시간 스트리밍 기능 사용 안함으로 수정가능하게 수정.

0.1.2. 통합 플레이어(APlayer) IE(11, 10) 지원되게끔 수정. 실험기능 추가.

0.1.1. 보안 패치

애드온 발전에 도움을 주신 분들

- kdps (https://github.com/kdps)