잡학사전/블로그 가이드

블로그 글에 오디오 파일 재생 기능 넣기

노하우저장소 2021. 8. 8.

티스토리에 오디오 파일을 바로 들려줄 수 있는 기능을 넣으려면 편집기를 HTML 모드로 변경 후 다음과 같이 입력하시면 됩니다.

<audio controls> <source src="소스파일주소" type="audio/포맷코드" /> </audio>

출처 : HTML Audio (w3schools.com)

파일 포맷	포맷 코드	비고
mp3	mpeg 또는 mp3
m4a	mp4	[Windows 음성 녹음기] 사용 시 [m4a]로 저장 됨 m4a 구글 드라이브 소스를 티스토리 적용 시 재생 기능 작동하지 않음 ※ 오디오 파일 포맷 변환 필요 (아래에 별도 설명)
wav	wav
ogg, oga	ogg

오디오 파일은 구글 드라이브에 저장하고 링크 생성을 한 뒤 생성된 링크 복사를 하되 아래와 같이 ID 부분만 잘라서 변경 링크와 같이 적용합니다.

원래 링크	https://drive.google.com/file/d/ID/view?usp=sharing
변경 링크	https://docs.google.com/uc?export=open&id=ID

mp3 파일 - mpeg 또는 mp3 (정상 작동)

m4a 파일 - mp3 (m4a 파일은 작동 방법 미확인)

m4a 파일 - mp4 (m4a 파일은 작동 방법 미확인)

Windows 음성 녹음기를 사용하면 m4a로 저장이 되는데, 녹음이 간편하지만 지금 알려드리는 방법으로는 티스토리에서 재생이 안됩니다.

결국 작동이 잘 되는 mp3로 포맷 변환이 요청되며, 제가 아는 한 가장 편리한 방법이 있어 소개해드립니다.

바로 https://cloudconvert.com/m4a-to-mp3를 이용하는 것입니다.

프로그램 설치 없이 웹 서비스만으로 구글 드라이브의 파일을 클라우드 상에서 즉시 변환 후 저장이 가능합니다.

1) Cloudconvert에 구글 드라이브 계정을 등록하면 아래 캡처와 같이 Select File에서 From Google Drive를 선택할 수 있습니다.

2) 파일 선택 후 변환하면 구글 드라이브에 mp3 파일이 바로 추가가 됩니다. 굉장히 편리하네요!

이상입니다.

댓글