티스토리 블로그 음성, 음악, 오디오 파일 넣어 재생하기

티스토리 블로그에서 음악파일을 재생할 수 있는 컨트롤러를 넣고 싶었지만, 해당 기능이 없어서 여러 가지 방법을 찾아보았습니다. 여러 가지 방법 중 HTML 오디오 태그 편집을 통해 할 수 있는 간단한 몇 가지 방법을 공유하고자 합니다. 

여기서는 티스토리 블로그에 음악을 재생할 수 있는 방법에 대해 2가지 방법을 소개해 보겠습니다.

목차

 

1. 블로그에 음악 파일을 업로드하여 재생기능 적용

블로그에 음악 파일을 업로드하여 재생기능을 적용하는 방법에 대해 알아보겠습니다.

 

1) 좌측 상단의 첨부 아이콘을 눌러 '파일'을 클릭하여 음악 파일을 블로그로 업로드합니다.

블로그 파일 업로드

업로드 팝업폴더 안의 음악파일

 

2) 블로그에 음악 파일을 아래와 같이 업로드하여 첨부합니다.

블로그에 업로드한 음악파일

 

3) 첨부한 음악파일을 우클릭하여 '링크 주소 복사'를 클릭합니다.

음악파일 우클릭 창에서 링크 주소 복사 클릭

• 복사한 링크는 메모장에 적어 놓는 것을 권장합니다.

 

4) 블로그 메뉴 중 우측에 있는 모드에서 HTML  모드로 전환합니다.

HTML 모드 전환

 

 

5) 아래의 HTML 오디오 태그에 "복사한 링크 주소"에 이전에 복사한 음악 파일의 링크 주소를 넣어줍니다. (아래의 코드를 COPY 할 수 있습니다.)

<p><audio controls="controls">
  <source src="복사한 링크 주소" type="audio/mp3" />
</audio></p>

 

audio 태그의 링크주소를 변경

 

6) HTML모드에서 원하는 위치에 변경된 audio 태그 전체를 복사해 붙여 넣기 합니다.

HTML 모드에서 audio 태그 넣기

 

 

7) 기본모드로 돌아와 '음악 재생 컨트롤러'가 적용되었는지 확인합니다.

음악 재생 컨트롤러 적용

 

블로그에 음악 파일을 업로드하여 재생기능을 적용하는 방법은 장단점이 있습니다. 장점은 생각보다 쉽다는 것이고, 단점은 블로그에 음악 파일을 업로드하여 첨부하는 것이기 때문에, 첨부한 음악파일이 있어야 한다는 것입니다.

 

그러나 꼭 동일한 블로그 글에 첨부된 음악 파일과 재생 컨트롤러가 같이 있을 필요는 없습니다. 음악 파일의 링크 주소만 있다면 위의 audio 태그에서 src에 링크 주소만 넣어 주면 됩니다.

 

※ 2024.03.11 현재 구글 드라이브에 업로드하여 음악재생하는 기능은 구글의 정책 변경으로 작동하지 않고 있습니다. 추후 다른 방법을 찾아 업데이트 하도록 하겠습니다.

2. 구글 드라이브에서  업로드하여 음악 재생기능 적용(X)

구글 드라이브에 음악 파일을 업로드한 뒤 해당 파일의 링크에서 필요한 ID부분만을 복사해 재생 가능한 링크주소에 ID를 넣어 HTML 오디오 태그에 삽입하여 음악 재생 컨트롤을 만드는 것이 요점입니다.

 

※ 2024.03.11 현재 구글 드라이브를 이용하여 음악재생기능은 구글의 정책 변경으로 작동하지 않고 있습니다. 추후 다른 방법을 찾아 업데이트 하도록 하겠습니다.

 

1) 구글 드라이브에 업로드한 음악 파일에서 다른 사람들과 '공유'를 한 후,  '링크 복사'를 클릭합니다.

① 구글 드라이브에서 음악 파일의 우측을 클릭합니다.

구글 드라이브 음악 파일

 

② 메뉴에서 '공유'를 선택합니다.

메뉴에서 공유 선택

 

③ 아래 그림처럼 '공유'를 선택합니다.

공유 메뉴에서 공유 항목 선택

 

④ 열린 팝업 창의 '제한됨'을 클릭하여 '링크가 있는 모든 사용자'로 선택합니다.

공유 팝업창에서 링크가 있는 모든 사용자 선택

 

⑤ 좌측 하단의 '링크 복사'를 클릭하고 복사한 링크는 메모장에 적어 놓습니다.

공유 팝업창에서 링크 복사 클릭

 

 

2) 구글 드라이브에서 복사한 링크를 음악 재생이 가능한 링크로 바꿔줍니다.

 

① 아래 음악재생이 가능한 링크와 구글 드라이브에서 복사한 링크를 확인합니다.  

https://docs.google.com/uc?export=open&id="ID"

뒤의 "ID"를 지우고, 구글 드라이브에서 복사한 링크의 ID만 복사해서 붙여넣습니다.

 

변경 전/ 변경 후 링크 주소

 

② 구글 드라이브 링크에서 ID 부분만 복사해서 구글 독스의 뒤에 ID를 붙여 넣어 음악재생이 가능한 링크로 변경합니다.

변경 전/변경 후의 링크에서 ID

 

 

3) HTML의 audio 태그에 변경된 링크 주소를 복사해서 붙여 넣습니다. ( src="변경된 링크" )

아래의 audio 태그를 복사해서 사용하세요.

<p><audio controls="controls">
  <source src="변경된 링크주소" type="audio/mp3" />
</audio></p>

 

 

4) 블로그의 HTML 모드에서 원하는 곳에 복사 & 붙여 넣기를 합니다.

HTML 모드에서 audio 태그

 

 

5) 기본모드로 돌아와 '음악 재생 컨트롤러'가 적용되었는지 확인합니다.

 

구글 드라이브에 음악 파일을 업로드하여 블로그에 음악 재생 컨트롤을 적용하게 되면 구글 드라이브에서 음악파일이 삭제되면 해당 재생 컨트롤러에서 음악 재생이 되지 않습니다. 또한, 구글 드라이브의 링크를 audio 태그에 붙여 넣어 그대로 사용하면 음악 재생이 되지 않습니다.

 

3. 오디오 태그, 재생 3가지 방법

1) 클릭 재생

<p><audio controls="controls">
  <source src="음악파일 링크주소" type="audio/mp3"/>
</audio></p>

 

2) 자동 재생 ( autoplay="autoplay" )

<p><audio autoplay="autoplay" controls="controls">
  <source src="음악파일 링크주소" type="audio/mp3" />
</audio></p>

 

3) 반복해서 재생 ( autoplay="autoplay" loop="loop" )

<p><audio autoplay="autoplay" loop="loop" controls="controls">
  <source src="음악파일 링크주소" type="audio/mp3" />
</audio></p>

 

 

4. 마치며

지금까지 티스토리 블로그에 음악 파일을 스트리밍 하는 방법과 3가지의 재생할 수 있는 audio 태그를 알아보았습니다. 확인해 보시고 원하는 음악 파일을 블로그에서 재생하세요.