[티스토리] 블로그에 오디오 음원(wav,mp3) 등록하기

 

오디오 음원 업로드 

티스토리에서 글을 쓸 때, 제가 생성한 영상이나 음원(mp3, wav)을 올려두고 소개하고 싶을 때가 있습니다. 그런데, 영상은 기본 제공되는 기능을 이용해서 업로드하면 바로 볼 수 있도록 되는데, 음원 파일은 업로드를 했을 때 그냥 파일로만 올라가기 때문에 웹페이지에서 들어볼 수 없다는 단점이 있었습니다. 그래서, 어떤 방식으로 할 수 있는지 찾아봤고 역시 답이 있었습니다. (humber님 블로그)

 

 

티스토리 음성파일 업로드 및 재생

 

 

처리 절차

• 음원 파일 업로드
• 파일 속성에서 파일 링크 정보 추출
• 글 작성을  'html 모드'로 변경
• 아래 코드 해당 부분에 추가
• 다시 '기본모드'로 변경 

 

음원 파일 업로드

 

 

음원 파일 링크 정보 추출

 

 

글 작성 창 'HTML 모드'로 변경 후 코드 추가 

 

그림 : 기본모드에서 HTML 모드로 변환

 

아래 코드를 오디오 플레이어가 위치할 곳에 복사합니다. 물론 src에 걸리는 파일의 위치는 위에서 복사한 값으로 변경해야 합니다. 

<div style="text-align: center:;">
	<audio style="display: inline-block:;" controls="controls">
		<source src="https://blog.kakaocdn.net/dn/bWnAZV/btsMC3IO5cF/NVkvQTG4O3e5bQWwBM3iR1/tfile.mp3" type="audio/mp3" />
	</audio>
</div>

 

변경 후의 모습은 다음과 같습니다.

그림 : 파일 링크를 위한 html code를 추가한 결과

 

끝나면 다시 '기본모드'로 변경합니다. 

 

처리 결과 예시

아래는 지난 작성 중인 글에 걸린 오디오 플레이어 화면입니다. 

그림 : 음원 파일 (mp3)를 업로드해서 블로그 내용에 추가하는 예시