티스토리 블로그 음악 사운드 넣기 재생(play)/일시중지(pause) 버튼 만들기

티스토리 음악 사운드 넣기 재생, 일시중지 버튼 만들기

---

출퇴근 시간이 길어서 영어공부를 간단히 합니다.

영문, 한글 지문과 음성이 있어야 하고

영어 음성은 전체 파일뿐만 아니라 문장당 음성을 들어가면 좋을 거 같지만 그렇게 구현이 쉽진 않았습니다.

우연히 티스토리 블로그를 보면서 그게 가능할 거 같아서 여러가지를 찾아봤습니다.

여러 가지를 정리하고 알아낸 팁을 여기에 공유하고자 합니다.

 

먼저 티스토리 블로그에 글쓰기를 눌러 사운드를 추가하게 되면 아래 그림처럼 됩니다.

그냥 다운로드 밖에 기능이 안됩니다.

 

제가 원하는 건 이걸 재생하고 멈추고 하는 거죠.

검색해서 원하는 html를 찾아서 써봤지만 이제는 모바일에서 재생이 안됩니다.

모바일에서도 재생이 될 수 있게 알려드리도록 하겠습니다.

 

먼저 글쓰기에 앞서

메모장에 써 줄 문장과 오디오 태그를 미리 써줍니다.

 

뒤에 <br> 띄어쓰기를 해주는 이유는 html에서 작업하는 데 좀 더 수월합니다.

 

글쓰기를 눌러 제일 먼저 할 거는 오디오(사운드) 파일(mp3)을 본문에 올리는 겁니다.

이래야 모바일에서도 재생이 가능하게 됩니다.

 

올려진 파일 오른쪽 클릭을 해서 링크 주소를 복사합니다.

 

그리고 미리 써둔 메모장에 "" 사이에 붙여 넣기를 합니다.

 

 

오른쪽 상단 html 모드로 갑니다.

 

여기에서 메모장에 있는 문장을 복사해 붙여넣기 합니다.

 

그리고 오디오(사운드) 태그도 붙여넣기 하면 됩니다.

 

 

그리고 기본모드로 다시 돌아가 정리를 해주면 끝납니다. PC, 모바일 둘 다 재생이 가능합니다.

 

정리

1. 메모장에 미리 문장과 오디오(사운드) 태그를 써놓는다.

2. 글쓰기를 눌러 파일을 먼저 업로드 한다.

3. 파일의 링크 주소를 복사해 메모장에 오디오(사운드) 태그에 넣는다.

4. html 모드로 가서 글과 오디오(사운드) 태그를 붙여 넣는다.

5. 기본모드에서 정리한다.