티스토리에 '오디오(mp3)' 재생 버튼 만들기

아래 그림처럼 티스토리에서 오디오(mp3) 재생 기능을 만드는 방법은 기본 메뉴에 존재하지 않습니다.

그렇지만 약간의 편법과 HTML 코드를 사용하면 쉽게 만들 수 있습니다.

오디오 재생 버튼

 

먼저, 오디오 파일만 올릴 '글'을 만들어야 합니다.

이후에 오디오 파일을 HTML로 불러올 글을 다시 만들어야 합니다.

-----

'글쓰기'에 들어가면 상단에 아래와 같은 메뉴가 보입니다. 

이중 '파일'을 선택합니다.

글쓰기 → 사진 모양 클릭  → 파일

 

아래 그림처럼 파일을 누르고 오디오 파일을 선택 후 업로드합니다.

카테고리는 선택 안 해도 되고, 글 저장시 '비공개'로 합니다.

파일이 업로드 되면 '완료'를 누르고 글을 저장합니다.

'파일' 메뉴를 통해 오디오 파일 업로드

 

저장이 된 글에 들어갑니다.

그리고 아래의 그림처럼 마우스로 오디오 파일에 가서 오른쪽 버튼을 누르고,

'링크 주소 복사'를 선택합니다.

오디오 파일 위에서 마우스 오른쪽 버튼 클릭 후 링크 주소 복사 선택

 

이제 오디오 파일을 넣고 글을 작성하기 위해

새로운 글을 작성하기 위해 '글쓰기'를 눌러줍니다. 

 

이후에 글쓰기 상단에 있는 메뉴 중, '기본모드'를 누르고

'HTML'을 선택합니다.

기본모드 → HTML

 

HTML 창으로 바뀌면 내용에 아래와 같이 HTML 코드를 넣습니다.

복사된 오디오 링크 붙여넣기에는 링크 주소 복사를 붙여넣기 됩니다.

( " " 는 지우면 안 됩니다.)

 

<p><center><audio style="width: 70%;" controls="controls"><source src="복사된 오디오 링크 붙여넣기" /></audio></center></p>