내정보

Guest 님
보유포인트
0
  • 재구매 할인
    30%
  • 컨텐츠 환불
    100%
  • 평점 포인트
    10%
  • 포인트 자동책정
    0%
콘텐츠 수 366

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

최초 등록일: 2019.07.01 조회수 : 2107

무료

5.0점 / 총 23명 참여
  • 구매자 130
  • 소개 게시글 첨부파일에 mp3, m4a, ogg, flac, mp4, webm파일이 있을 경우 자동으로 본문에 HTML5플레이어를 생성합니다. 
  • 설치경로 /addons/simple_mp3_player 
  • 지원환경 XpressEngine,Rhymix 
  • 라이선스 GPL v3 
  • 분류 애드온
  • 제작자 후하니
  • 다운로드
    simple_mp3_player_0.2.1.zip 587.04KB (잔여일 : -, 잔여횟수 : -)
    simple_mp3_player_0.2.2.zip 587.11KB (잔여일 : -, 잔여횟수 : -)
    simple_mp3_player_0.2.3.zip 587.33KB (잔여일 : -, 잔여횟수 : -)
    simple_mp3_player_0.2.4.zip 588.63KB (잔여일 : -, 잔여횟수 : -)
    simple_mp3_player_1.0.0.zip 594.04KB (잔여일 : -, 잔여횟수 : -)
    simple_mp3_player_1.1.0.zip 598.59KB (잔여일 : -, 잔여횟수 : -)
    simple_mp3_player_1.1.1.zip 599.41KB (잔여일 : -, 잔여횟수 : -)
    simple_mp3_player_1.1.2.zip 682.7KB (잔여일 : -, 잔여횟수 : -)

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

 

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

001.png

01.png

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

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

 

 

with-media-session.png

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

 

 

002.png

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

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

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

 

 

 

 

동영상 삽입1.png

 

동영상 삽입2.png

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)

 

댓글 '73'

프로필 사진 profile
후하니 2019.11.03 20:34 댓글 별점
기능을 추가하는것 자체는 어렵지 않지만 동영상에서 섬네일을 추출할 때 ffmpeg라는 프로그램이 필요합니다.
해당 기능은 추가 고려해보겠습니다.
프로필 사진 profile
웹지기 2019.11.03 20:49 댓글 별점
네. 해당 프로그램 사용 가능한 환경에서 섬네일 생성이 가능하면 이미지 삽입 없는 게시글에 큰도움이 될 것 같습니다.
프로필 사진 profile
웹지기 2019.11.04 12:10 댓글 별점
추가로 하나 의견 드리겠습니다.
맨 아래 코드에 스크립트들 불러오는 코드 조건에
else if($called_position == 'after_module_proc' && Context::getResponseMethod()!="XMLRPC" && Context::get('document_srl') && Context::get('act')!='dispBoardWrite')

&& Context::get('act')!='dispBoardWrite' 추가해 주셔서 글 수정 시에 동작 안되도록 부탁드립니다.
에디터 관련 다른 프로그램의 js와 충돌이 발생해서 다른 자료 동작이 안되는 경우가 발생해서요.
프로필 사진 profile
후하니 2019.11.04 12:31 댓글 별점
다음 업데이트 배포 이전에 적용하도록 하겠습니다.
의견 감사합니다.
프로필 사진 profile
웹지기 2019.11.07 14:13 댓글 별점
깃허브에 동영상 섬네일 생성 기능이 추가되어 다운받아 적용해 봤는데 섬네일이 만들어지 않네요.
깃허브 이슈에 댓글로 달아드렸습니다.

https://github.com/huhani/xe-simple-mp3-player/issues/12#issuecomment-550759269
프로필 사진 profile
후하니 2019.11.07 20:47 댓글 별점
애드온 설정에서
동영상 섬네일 사용 "사용", 게시글 섬네일 자동 적용 "사용" 으로 설정되었을때도 섬네일이 생성되지 않는가요?
혹시 해당 사이트 주소를 알려주시면 참고하는데 도움이 될 것 같습니다.
프로필 사진 profile
웹지기 2019.11.07 21:07 댓글 별점
네. 애드온 설정은 모두 사용으로 되어 있습니다. https://well-buying.com 축구갤러리에 mp4게시글들이 있습니다.
프로필 사진 profile
웹지기 2019.11.07 21:14 댓글 별점
방금 테스트를 해보니 신규때 작동하고 수정할때 작동 안하는 거네요.

기존 게시글로 태스트 했거든요.
프로필 사진 profile
후하니 2019.11.07 21:32 댓글 별점
https://github.com/huhani/xe-simple-mp3-player/commit/e6259fdc5e245fd7f14bab4f4797c8c63181ca8f
수정시 적용이 되지 않는 문제 수정하였습니다.
아마 /files/simple_mp3_player 폴더의 파일들을 한 번 지우시면 잘 작동할거에요.
프로필 사진 profile
웹지기 2019.11.07 22:09 댓글 별점
감사합니다. 잘됩니다!
프로필 사진 profile
세이나 2019.12.03 23:40 댓글 별점
궁금한 점이 있습니다. 잘쓰고있는데 가사가 나오질 않습니다.
가사는 어떻게 해야 나오나요?..그리고 다운로드 기능 있는건 좋은데
<사용> 또는 <사용안함> 설정이 있었으면 좋겠습니다.
프로필 사진 profile
후하니 2019.12.25 14:54 댓글 별점
답변이 늦어 죄송합니다.
가사같은 경우 외부 서버에서 가져오는 방식인데, 외부 서버가 바뀌거나 하는 이유로 아마 가사를 불러올 수 없는것 같습니다.
그리고 다운로드 기능은 추후 수정하도록 하겠습니다.
감사합니다.
프로필 사진 profile
겨울나그네 2019.12.20 14:08 댓글 별점
감사합니다. 잘 쓰겠습니다.
프로필 사진 profile
혜구 2019.12.22 05:40 댓글 별점
후하니님! 애드온 잘 사용하고 있습니다.
다만 최근에 추가해주신 playsinline 속성을 사용해봤지만 소리가 없는 동영상은 전체화면이 되지 않고 소리가 있는 동영상은 예전처럼 여전히 전체화면이 되는 것 같습니다 ㅠ_ㅠ
프로필 사진 profile
후하니 2019.12.25 14:55 댓글 별점
해당 문제에 대해 파악한 뒤, 추후 패치하도록 하겠습니다.
감사합니다.
프로필 사진 profile
라그릿 2020.03.07 17:42 댓글 별점
mp4 재생이 혹시 댓글에도 적용이 되게하려면 어떻게 해야하는지 알 수 있을까요?
프로필 사진 profile
후하니 2020.03.10 20:04 댓글 별점
현재 게시글 본문의 비디오, 오디오 같은 경우 php가 아닌 자바스크립트로 출력을 하고 있습니다.
댓글 같은 경우 요즘 나오는 게시판 스킨에서 AJAX처리를 하는 경우가 많아 애드온 자바스크립트에서 다루기는 조금 난해한 부분이 있습니다.
1.1.3버전에서 php단에서 a href 링크를 video, audio태그로 자동 변환시켜야 하나 고민입니다. ㅠㅠ
프로필 사진 profile
라그릿 2020.03.10 20:12 댓글 별점
뭔가 댓글 새로고침 후에 안보이는건 상관없지만 처음에 보이는거는 로딩이 됬으면해서...
php단에서 a href 링크를 자동 변환시키면 안좋은 부분이 있나요?
프로필 사진 profile
후하니 2020.03.10 20:55 댓글 별점
나중에 자바스크립트로 제어하기가 초큼 까다로운 면이 있지요..
예를들면 미디어 알림이나 플레이어 재생시 다른 재생중인 플레이어 자동 일시정지 기능을 못 씁니다.
일단은.. php단에서 html을 변환(a href-> audio, video)해서 출력하게끔 해보겠습니다.
프로필 사진 profile
라그릿 2020.03.10 21:46 댓글 별점
에구 감사드립니다.. 라이믹스에서 제공하는 mp4 나 mp3 삽입기능은 에디터에서 지우려고하면 소스편집으로 지워야해서.. 후하니님 모듈을 사용하면서 자동변환되서 잘 사용중인데 댓글은 적용이 안되서 아쉬웠었는데 감사합니다
프로필 사진 profile
웅돌프 2020.05.10 02:07 댓글 별점
PHP 7.3에서 7.0으로 다운그레이드 후 애드온 작동이 안하는 것 같습니다ㅠ_ㅠ
애드온 삭제 후 재설치해도 마찬가지인데 DB까지도 삭제를 해야 하나요?
프로필 사진 profile
radix 2020.05.25 23:49 댓글 별점
우와... 이런 고퀄리티의 애드온을 무료로... ㄷㄷ... 정말 고맙습니다!!
프로필 사진 profile
헬프미헬 2020.07.18 04:46 댓글 별점
좋은자료 감사합니다.