내정보

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

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

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

무료

5.0점 / 총 19명 참여
  • 구매자 76
  • 소개 게시글 첨부파일에 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.1 [+Exp].zip 604.58KB (잔여일 : -, 잔여횟수 : -)

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. 오디오 파일 URL 암호화 기능 제공.

5. MediaSession 지원

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

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

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

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

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

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

 

 

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

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 파일이 있어야 동작합니다.

 

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

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

 

 

수정 내역

 

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)

 

댓글 '33'

프로필 사진 profile
아파치 2019.07.01 01:32 댓글 별점
수고 많으셨습니다. 감사합니다.
프로필 사진 profile
구미호 2019.07.01 05:15 댓글 별점
아이디어와 제작이 엄청납니다
고생 많으셨어요
프로필 사진 profile
보고하비 2019.07.01 09:11 댓글 별점
고생 하셨을텐데 무료로 풀다니 감사드립니다.
프로필 사진 profile
DoubleU 2019.07.01 09:57 댓글 별점
감사합니다~
프로필 사진 profile
그리다 2019.07.01 10:24 댓글 별점
감사합니다...~~^^
프로필 사진 profile
루딩 2019.07.01 11:23 댓글 별점
디자인도 이쁘고 너무 좋습니다!~~ 다운버튼 기능 원츄 -_ㅠ
프로필 사진 profile
비누남어 2019.07.01 12:10 댓글 별점
와~ 멋지십니다.
프로필 사진 profile
핑크두유 2019.07.01 12:30 댓글 별점
짝짝짝
프로필 사진 profile
엔젤 2019.07.01 12:45 댓글 별점
와 대박입니다.~~ 더구나 무료^^ 감사합니다.
프로필 사진 profile
아그네스 2019.07.01 13:28 댓글 별점
감사합니다.
프로필 사진 profile
지구침략자 2019.07.03 20:50 댓글 별점
와우~ 무료로 이용할수 있다니 감사합니다
프로필 사진 profile
세이나 2019.07.05 22:00 댓글 별점
수고 하셨습니다. 감사히 잘 쓰겠습니다.
프로필 사진 profile
라그릿 2019.07.06 09:23 댓글 별점
와 감사합니다!!
프로필 사진 profile
마음의빈자리 2019.07.09 15:57 댓글 별점
무료에 업데이트까지... 감사합니다. ^^
프로필 사진 profile
xelayout 2019.07.09 16:20 댓글 별점
수고 많이하셨습니다.
프로필 사진 profile
만키로군 2019.07.15 17:07 댓글 별점
고맙습니다. 잘쓰겠습니다.
프로필 사진 profile
파워스피드 2019.07.30 20:44 댓글 별점
저는 플레이어가 제대로 나오진 않지만 음악듣기는 가능하네요~ php업그레이드도 해봐야겠어요 정말 이런 좋은프로그램 무료로 배포해주셔서 감사합니다^^
프로필 사진 profile
웹조아 2019.08.22 08:11 댓글 별점
고생 많으셨습니다! 감사합니다^^
프로필 사진 profile
adlib 2019.08.23 00:17 댓글 별점
잘 쓰겠습니다.
이번 버전은 가사가 나오나요?
프로필 사진 profile
후하니 2019.08.23 16:19 댓글 별점
해당 기능은 실험적인 부분이라 1.0버전대에서는 삭제되었습니다만..
+exp버전에 임시로 넣어뒀으니 확인해보세요.
프로필 사진 profile
adlib 2019.08.24 00:13 댓글 별점
대단히 감사합니다.
프로필 사진 profile
라그릿 2019.08.28 19:22 댓글 별점
blueplayer 를 사용시 재생버튼이나 다음곡으로 이동을 누르면 새창으로 창이 뜨는데 이건 해결못하나요?
프로필 사진 profile
라그릿 2019.08.28 20:09 댓글 별점
흠, 자동 링크 애드온을 끄니까 해결이 되네요..? 자동 링크 애드온이랑 같이 사용할 방법이 없을까요?
프로필 사진 profile
후하니 2019.08.28 21:08 댓글 별점
xe에 기본적으로 포함되어있는 자동 링크 애드온으로 체크해보았는데 문제되는 점은 없는것 같네요.
사이트 주소 알려주시면 확인해보겠습니다
프로필 사진 profile
라그릿 2019.08.28 23:34 댓글 별점
말씀하신것을 보고 XE의 자동 링크로 교체하니 문제가 사라졌습니다.

라이믹스에 있는 자동 링크가 문제인거같습니다.
프로필 사진 profile
웹지기 2019.08.30 11:26 댓글 별점
캐시서버 사용하는 곳을 위해 비디오소스를 만들어줄때 캐시서버의 도메인으로 만들어줄 수 있도록 요청드립니다.

ex) 원본소스에는 도메인/files/.... 이렇지만 플레이어 소스에는 img.도메인/files/... 로 출력될 수 있도록요. 이 애드온으로 mp4를 보여주려니 캐시가 안되서 문제가 되네요.
프로필 사진 profile
후하니 2019.08.30 13:24 댓글 별점
https://xetown.com/files/attach/images/1089589/965/259/001/152ee61324f00e2cae560c7aecc59e15.png
일단은 임시로 애드온 파일중(최신버전 기준) base.js에서 위 사진의 네모박스 부분을 추가하시고,
애드온 설정에서 '브라우저 캐시 사용' 항목을 사용으로 설정해주세요.
해당 기능은 추가 고려해보겠습니다.
프로필 사진 profile
혜구 2019.09.17 12:32 댓글 별점
수고하셨습니다. 좋은 애드온이네요! 잘 사용하겠습니다
프로필 사진 profile
루딩 2019.09.19 21:00 댓글 별점
혹시 이런 것도 가능할까요?

외부에서 코멘트주소

http://naver.com/213123#comment_3
으로 클릭하면 바로 코멘트 부분까지 내려가는데

player에 list형식일때

10번째 곡이면

#player10 으로 불러오면 10번째 곡을 외부에서 링크를 타고 들어와도 바로 재생가능할 수 있는것도
가능할지요~
프로필 사진 profile
후하니 2019.09.19 23:07 댓글 별점
굳 아이디어!
다음 업데이트때 통합 플레이어 기준으로 한번 넣어보겠습니다.
프로필 사진 profile
tonel 2019.09.20 03:52 댓글 별점
좋은 프로그램 공유해주셔서 감사합니다.
다운로드 받아 테스트를 해보니 아래와 같은 문제 및 궁금한 점이 생겼습니다.

1. 라이믹스(1.9.9.4) & PHP(7.3.9)
~ 0.2.4 버전 : BluePlayer 화면 정상 출력/동작
1.0.0 ~ 1.1.1 버전 : BluePlayer 화면 미출력(안 보임)

2. MP3 파일 다운로드 방지 방법
현재(0.2.4 버전) 파일 다운로드가 가능합니다.

3. 유튜브 재생(주소 링크)과는 전혀 관계 없는 프로그램인가요?
MP3 음악을 다운로드 받아 게시글에 업로드하는 방식은 불법인 것으로 알고 있습니다
프로그램 수정 시 유튜브 주소 링크로도 재생 가능한지 궁금합니다.
프로필 사진 profile
후하니 2019.09.20 10:55 댓글 별점
각 항목별로 답변을 드리자면..
첫 째로 해당 애드온을 적용했을때 문제가 되는 사이트 주소를 알려주시면 애드온 문제 해결에 도움이 될 것 같습니다.
두 번째론 위 애드온에서 다운로드(비정상적인 음원 추출예방)는 xe상에서 다운로드 링크 클릭을 하여 다운받는게 아닌 브라우저 개발자 툴이나 기타 방법으로 (ex 사이트의 스트리밍 음원을 무단 추출하여 로그인, 포인트 소모 없이 다운로드) 음원을 다운 받는걸 말합니다.
만약 코어상에서 유저들이 다운로드하는 행위를 막고 싶으시다면 게시판 설정에서 따로 파일 다운로드 권한 설정을 하시면 됩니다.
마지막으로 유튜브 API를 이용하여 이론적으로 가능은 합니다만, 일단 무조건 비디오 화면을 보여줘야 하고(비디오 화면을 보여주지 않고 오디오만 재생하게 하면 유튜브 약관 위반) 무엇보다도 이는 초기 애드온 제작시 요구사항으로 넣지 않은거라 기능을 넣는다면 꽤나 많은 수정이 있을 것으로 예상됩니다.
그리고 mp3파일의 경우 파일 자체적으로는 저작권 문제가 없으나 파일의 음원때문에 저작권 위반(불법)이 되는 경우가 많습니다.
프로필 사진 profile
영숙이 7시간 전 댓글 별점
업로드 영상까지 재생..반응형에 플레이어 디자인도 끝내줍니다ㅏ
서버에 요청 중입니다. 잠시만 기다려 주십시오...