[티스토리 블로그] HTML코드로 오디오/음성 파일 만들기

안녕하세요! 토미타미입니다

오늘 포스팅은 티스토리 블로그에서

HTML로 오디오 파일 넣는 방법을 알려드리겠습니다

제 블로그의 주 컨텐츠는 영어 표현인데요!

어떻게 하면 영어 표현 컨텐츠를 좀 더 풍성하게 만들 수 있을까

고민하던 찰나에 음성파일을 넣어보면 어떨까라는 생각이 들어

음성파일을 넣어보려고 하니 안되더라고요!

검색해보니, 예전 티스토리에서는 가능했었는데

바뀐 티스토리에서는 따로 오디오 파일 넣는 게 없는 것 같더라고요

그래서 직접 HTML로 audio를 만들어서 넣어야 했습니다 ㅠㅠ

그럼, 바로 알려드릴게요!

---

 

 

HTML 오디오 만들기

 

오디오 파일

제가 현재 주로 사용하고 있는 오디오의 모습입니다. 둥근 게 깔끔하고 귀엽죠? 저는 기본적으로 클릭하면 재생되는 방식을 이용하고 있는데. 혹시 자동재생과 반복 자동재생으로 파일을 넣기를 원하시는 분도 있을까 해서 총 3가지 방식으로 오디오 파일을 넣는 방법을 소개해드리겠습니다! 아래 보시면 <source srs=""에서 큰 따옴표 사이에 파일 링크 주소라고 적혀있는데, 이 부분에 오디오 파일로 만들길 원하시는 음성파일의 링크 주소를 복사해서 넣으시면 됩니다! 제가 드레그나 오른쪽 클릭이 안되게 설정되어있을 텐데. HTML주소가 짧은 편이니,, 불편하시더라도 직접 타이핑해주셔야 해요 ㅠㅠ

 

■클릭하면 재생

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

 

■자동재생

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

 

■반복자동재생

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

 

함께 보면 좋은 포스팅: '블랙키위' 키워드 검색량 조회 사이트 (Feat. 웨어이즈포스트 키워드 마스터, 키자드)

 

 

 

파일 링크 주소 복사하는 방법

 

파일링크주소

 

파일 링크 주소 복사하는 방법은 포스팅에 음성파일을 올리면 다운받을 수 있는 파일이 생성되는데. 그 파일을 클릭해서 오른쪽 버튼을 누르시면 가운데 부분에 링크 주소 복사가 있습니다. 이 방법으로 파일 링크 주소를 복사하시고 <source srs="파일링크주소">에서 파일 링크 주소 부분에 붙여 넣기 해주시면 됩니다! 

 

함께 보면 좋은 포스팅: 애드센스 광고 쉽게 넣는 방법│글 수정하면 애드센스 광고 잘리는 현상 해결하기

 

 

여기까지 티스토리 블로그에

HTML로 오디오 파일 넣는 방법을 알아봤습니다

도움이 되셨다면 하트와 구독

그럼 20000