블로그에서 어학 학습용 예문, 듣기 버튼 누르면 음성으로 플레이하기

이런 저런 시행착오

우선 제가 구현하고 싶은 건 일본어 문장이 있고, 듣기 버튼을 누르면 일본어 tts를 사용해 녹음한 소리가 나오는 거였습니다.요렇게~

간단할 줄 알았죠, mp3 올리면 되는 줄 알았는데, 아니더라구요. 블로그 스팟이나 워드프레스(검색해보니 티스토리도)에서는 웹하드에 올려놓고 링크를 걸어야 하더라구요. 하지만 나에겐 제미나이가 있다! html 만들어줘! 하니까 뚝딱 만들고 나서는 구글 드라이브에다가 mp3를 올리고 링크 주소를 html에 넣으면 되는 방식이었어요. 구글 드라이브에 해보니까 테스트에서는 소리가 났는데, 두번째부터 안됩니다. 당황;;

검색해보니 무슨 정책때문에 그럴 수 있다고 github가 더 안정적이라고 해서(제미나이가 그랬어요;;) 그렇게 완성시켰습니다.

뭐든지 처음이 어렵지 한번 해놓으면 쉽잖아요. 제가 한 방법을 알려드릴테니, 쉽게 따라하세요. 혹시 더 좋은 방법이 있으면 댓글로 꼭 알려주시구요.

블로그에서 어학 학습용 예문, 음성으로 듣기 버튼 만들고 플레이하기에는 크게 두가지 단계가 있지요

첫번째는 음성을 만들어서 웹하드에 올려놓기, 두번째는 블로그에서 링크 연결하기

음성 파일 github에 올리기

어학 학습용 예문 음성 파일은 tts 사이트 검색하셔서 거기서 mp3파일로 만들어 놓습니다. 저는 온도쿠 라는 사이트를 이용해봤어요. 로그인 없고 무료버전 일본어 더빙 쓸만하더라구요.

다시 말씀 드리지만, 구글 드라이브에 올렸는데 안되시는 경우, 또는 다른 웹하드에 올렸는데 안되시는 경우 github는 잘 되니까 이렇게 하시라고 알려드립니다
github는 개발자들이 소스를 저장하고 협업하는 사이트인데요, mp3 파일을 올려놓고 링크 거는 것도 가능하더라구요.

SIGN UP 들어가셔서 계정이 있으시면 로그인 하시고, 아니면 계정을 만드셔야 하는데요.
구글 블로그스팟 하시는 분들은 구글 계정이 있으시겠죠? Continue with Google 하시고 계정 골라주시면 바로 입장입니다

로그인 된 화면입니다. github에서는 용어가 조금 생소할 수 있는데요, repository가 폴더라고 생각해주세요. 새로운 폴더를 만듭니다.

체크 된 곳만 확인해주세요. repository에 폴더 이름을 넣어주세요. 아무것도 건드리지 말고(visibility가 public으로 되어 있는지만 확인해 주세요) 맨 아래 create repository 누르면 완성

repository name을 readingmp3라고 한다면 폴더에 파일들이 저렇게 뜹니다. mp3 파일을 업로드 하려면 우측 add file을 눌러주세요.

업로드할 파일을 drag해서 넣어주시고, 아래에 commit changes 눌러주시면 끝

저장한 파일의 링크를 얻는 방법은 다시 폴더 창으로 넘어가서(repository창, 아이디 옆에 폴더이름 눌러주시면 갑니다) 파일이름 우클릭해서 링크복사 눌러주시면 됩니다.

주의사항-링크 주소를 바꿔야 합니다

링크파일을 html에 바로 붙이면 안됩니다. 주소가 달라요. 예를들어 링크 주소가
https://github.com/*****(아이디)/readingmp3(폴더이름)/blob/main/nihongo500-2.mp3(파일이름) 이라면
https://raw.githubusercontent.com/*****(아이디)/readingmp3(폴더이름)/main/nihongo500-3.mp3(파일이름) 처럼
github.com을 raw.githubusercontent.com로 바꾸고 blob를 지워야합니다.

블로그에 html로 mp3파일 올리기

블로그스팟 글쓰기에서 html 모드로 들어갑니다. 오디오파일을 재생하는 방법은

Audio 태그 사용법

<audio controls>
<source src="https://raw.githubusercontent.com/*****(아이디)/readingmp3(폴더이름)/main/nihongo500-3.mp3(파일이름)" type="audio/mpeg">
</audio>

* source src 다음에 링크 주소를 적어주시면 됩니다.
* 위의 주의사항에 적어놓은 것처럼 복사한 주소를 한번 바꿔주셔야 합니다.

위의 html처럼 audio controls태그를 사용하시면 재생바가 생기고 음원을 들을 수 있습니다.

듣기 버튼 만들고 누르면 예문 음원 재생되게 하기

듣기버트 만들고 음원 링크

<div style="margin-bottom:15px">
<button onclick="document.getElementById('audio1').play()" style="margin-right:5px">듣기</button>
<audio id="audio1">
<source src="바꾼 링크주소" type="audio/mpeg">>
</audio>
</div>