구글 드라이브 사용법: MP3 오디오 파일을 웹페이지 블로그에 올리는 방법과 꾸미기 (오디오 재생기)

구글 드라이브에 올려 놓은 오디오 파일을 <audio>태그를 사용하여 블로그나 웹페이지에서 재생하는 방법입니다.

기본적으로는 <audio> 태그 사용법과 같습니다.
구글 드라이브의 오디오 파일을 공유로 설정한 뒤에, 오디오 파일의 고유 아이디(ID)를 가져와서, <audio>태그의 소스 주소(URL)를 만들어 주면 됩니다.

[HTML 오디오 플레이어 태그 기본 모양]

<audio controls>
  <source src="beautful-day.mp3" type="audio/mpeg">
</audio>

[구글 드라이브 오디오 파일 재생을 위한 태그 모양]

<audio controls >
 <source src="https://docs.google.com/uc?export=open&id=오디오파일 고유 아이디" type='audio/mp3' />
</audio>

※  파랑색으로 표시한 https://docs.google.com/uc?export=open&id= 부분은 구글 드라이브에 있는 오디오 파일 주소를 만들기 위한 것입니다.



1. 오디오 파일 고유 아이디로 태그 만들기

구글 드라이브에 올려 놓은 오디오 파일의 주소(URL)에서, 파일의 고유 아이디(ID) 부분만 떼어 내어, 소스 주소를 아래와 같이 만듭니다.

[구글 드라이브에서 가져온 파일 공유 주소(URL) 모습]

https://drive.google.com/file/d/1dZpSWeYGSqmaCXZyvzqcRP8vuFCAdJh/view?usp=sharing

[오디오 파일 고유 아이디 부분]

https://drive.google.com/file/d/1dZpSWeYGSqmaCXZyvzqcRP8vuFCAdJh/view?usp=sharing

※  ~d/ 와  /view~ 사이에 있는 암호 같이 보이는 부분이 고유 아이디 부분입니다.


[고유 아이디를 추가하여 완성한 태그 모습]

<audio controls >
 <source src="https://docs.google.com/uc?export=open&id=1dZpSWeYGSqmaCXZyvzqcRP8vuFCAdJh" type='audio/mp3' />
</audio>

[실제 적용한 오디오 플레이어 모습]

2. 구글 드라이브의 오디오 파일 주소(URL) 가져 오기

>> 구글 드라이브에 올려 놓은 오디오 파일 이름 위에 마우스를 놓고, 오른쪽 버튼을 클릭하여, 공유 선택
>> 링크를 통하여 공유할 수 있도록 설정 변경
>> 파일 공유 링크를 복사함

[구글 드라이브의 오디오 파일 공유 주소 얻기]

3. 오디오 플레이어 기능 설정과 모양 꾸미기

1) 기본 기능 버튼 보이기 / 숨기기 설정

아래의 태그에서 controls 속성은 플레이어의 기본 작동 기능인 재생(Play), 일시멈춤(Pause), 검색(Seeking), 소리크기(Volume) 버튼을 표시하도록 합니다. 이 속성을 제거 하면, 기능 버튼이 표시되지 않습니다.

[재생 등의 기본 작동 버튼이 표시되도록 설정한 태그 모습]

<audio controls>
  <source src="beautful-day.mp3" type="audio/mpeg">
</audio>

2) 추가 기능 설정하기

아래 태그는 오디오 파일이 준비가 되면, 자동으로 재생을 시작하도록 autoplay 속성을 추가한 모습입니다.  이러한 추가 기능에는 자동으로 반복 재생이 되도록 하는 loop,  음소거 muted 등이 있습니다.

[자동 재생되도록 속성을 추가한 태그 모습]

<audio controls autoplay>
  <source src="beautful-day.mp3" type="audio/mpeg">
</audio>

3) 다운로드 버튼 숨기기

<audio> 태그를 적용하면, 구글 크롬 브라우저에서는 다운로드 버튼이 자동으로 표시됩니다.  버튼이 표시되지 않게 하려면, 아래와 같이 controlsList="nodownload" 속성을 주면 됩니다.

[다운로드 버튼 표시 안하기 태그 모습]

<audio controls controlsList="nodownload">
  <source src="beautful-day.mp3" type="audio/mpeg">
</audio>

주) 위와 같이 하면, 구글 드라이브에 있는 오디오 파일을 블로그나 웹페이지에서 재생할 수 있어 편리하고 좋습니다. 다만, 이렇게 하는 것이 구글 정책에 위배 되는 지에 관한 글을 찾아 보았으나, 명확한 답변을 얻을 수 있는 글을 찾지 못하였습니다.

>>  구글 드라이브 (Google Drive) 사용법 : 글 목록