HTML 구글 드라이브로 웹페이지 블로그에 음악 넣는 방법 (audio 태그)

이번에 포스트를 작성하면서 음악을 좀 넣으려고 할 때, 음악을 어디에 업로드할까 하다가 구글 드라이브를 선택했습니다. 그래서 링크를 그대로 사용했더니 음악이 실행이 안 되더군요. 그래도 방법을 찾아보니 있네요.


위에 있는 이미지처럼 audio 태그를 사용하여 위와 같은 형식으로 음악을 실행할 수 있도록 해봅시다. 준비물로는 'audio 태그'와 '음악 파일 URL'이 필요합니다.

1. 구글 드라이브에 음악을 업로드한 후 링크 공유하기

• 먼저 구글 드라이브에 음악을 업로드 합니다.
• 그러고 나서 음악 파일에 마우스 오른쪽 버튼을 눌려서 '링크 생성'을 클릭합니다.

• '제한됨'을 클릭해서 '링크가 있는 모든 사용자에게 공개'를 선택합니다.

• 링크 복사를 클릭하고 나서 완료를 클릭합니다.

2. 복사한 공유 링크를 다이렉트 링크로 바꾸기 (음악 파일 URL 획득)

링크의 차이는 직접 해보면 알 수 있지만 구글 드라이브에서 복사한 공유 링크는 들어가보면 미리보기로 보여주는 형식입니다. 하지만 다이렉트 링크는 들어가는 순간 바로 다운로드가 되죠.

아래, 초록색 박스에 있는 링크는 구글 드라이브 파일을 다이렉트 링크로 바꿔주는 사이트입니다.

Google Drive Direct Link Generator

• 사이트에 들어가서 'Enter your sharing URL'에 복사한 링크를 붙여넣고 'Create Direct Link'를 클릭합니다.
• 'Output link'가 다이렉트 링크입니다. 링크를 클릭하면 자동으로 복사가 됩니다. 이로써 '파일 음악 URL'을 획득했습니다.

https://drive.google.com/uc?export=download&id=1sPfbPeXtHuAnoCZO5XW8czYSr1tkfjA-

위에 박스 안에 있는 건 다이렉트 링크입니다.
여기서 다이렉트 링크는, 아래에 있는 아웃풋 링크에서 '연보라색으로 칠한 부분'과 쉐어링 URL에서 노란색으로 칠한 부분을 합친 것입니다. 그래서 연라보색으로 칠한 부분을 따로 저장해두고, 공유 링크에서 file/d/ 와 /view? 사이 부분, 슬래시 사이에 있는 내용을 복사해서 붙여넣으면 됩니다. (끝에 있는 슬래시는 포함되지 않음.)

https://drive.google.com/uc?export=download&id=파일 값

보라색 부분은 바로 다운로드를 하게 하는 구문이고, '파일 값'은 위에 있는 노란색 부분입니다.

3. audio 태그 사용하기

<audio controls controlslist="nodownload" preload="none" autoplay loop>
<source src="음악 파일 URL">
이 문장은 사용자의 브라우저가 audio 요소를 지원하지 않을 때 화면에 출력됩니다.
</audio>

• 이걸 그대로 복사해서 사용하면 됩니다. 굵고 다른 색깔로 표시된 부분만 수정, 삭제하세요.
• 음악 파일 URL : " " 안에 위에서 만들었던 다이렉트 링크를 복사해서 붙여넣습니다.
• controls : 재생, 일시정지, 재생 시간, 볼륨 조절할 수 있게 이미지가 보입니다. (마우스 우클릭으로 반복 설정 가능.)
• controlslist="nodownload" : 다운로드 버튼을 없애줍니다. (하지만 마우스 우클릭으로 오디오 저장이 가능.)
• preload="none" : 페이지 로드 시 오디오 파일을 미리 다운로드 하지 않도록 요청합니다. autoplay가 있을 시 preload는 무시됩니다.
• autoplay : 자동 재생 기능. 모바일이나 태블릿 기기에서는 자동 재생이 되지 않습니다.
• loop : 반복 기능.
• 이 문장은 ~ 출력됩니다. : 문장 그대로 안내 문구입니다. 필요 없다면 삭제하면 됩니다.

■ 예시

<div oncontextmenu="return false">
<audio controls controlslist="nodownload" preload="none" loop>
<source src="https://drive.google.com/uc?export=download&id=1sPfbPeXtHuAnoCZO5XW8czYSr1tkfjA-">
</audio>
</div>

• 붉은색으로 표시한 2줄은 마우스 우클릭 방지 기능입니다. 사용할 때는 예시처럼 맨앞에 1줄, 맨뒤에 1줄을 붙여넣으면 됩니다.
• 짙은 녹색으로 표시한 부분은 구글 드라이브 다이렉트 링크입니다.
• 기능은 위에 있던 것들 중에서 autoplay만 삭제했습니다.

■ 결과물

4. 브라우저별 오디오 파일 지원 여부

브라우저 지원	mp3	wav	ogg
Edge Internet explorer	○	○	Ｘ
Chrome	○	○	○
Firefox	○	○	○
Safari	○	○	Ｘ
Opera	○	○	○