HTML5 오디오 태그

오디오 태그 속성

<audio src="URL" controls="controls" autoplay="autoplay" loop="loop" preload="auto"></audio>

속성 값
(1) controls= "controls", "", 지정안함
(2) autoplay= "autoplay", "", 지정안함
(3) loop= "loop", "", 지정안함
(4) preload= "none", "metadata", "auto" (auto= browser defualt value)

오디오 태그 브라우저 

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

상세 내용 참조 링크: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

새로운 글쓰기 에디터 적용 (예)

[MIDI] 銀色完全版, ぎんいろ

---

MIDI archives

mmgink_op.mid

0.12MB

 

고찰

파일 첨부는 10MB 용량 내에서 업로드 진행해야 한다. 다만, 티스토리만 한정하지 않으면 용량 제한은 여러가지 방법으로 해결할 수 있으므로 큰 문제는 아니라고 본다.
오디오 태그 추가는 새로운 글쓰기 에디터에 없는 기능이고 사용자가 수동으로 HTML 모드에서 직접 태그 적용해야 한다. 기억이 나지 않을 경우를 대비해서 오디오 태그 브라우저만 살짝 메모해 놓는다.
오디오 주소 URL은 파일 첨부후 확인해야 한다. 참고로, 현재 티스토리의 첨부 파일에 대한 경로는 ''https://blog.kakaocdn.net/dn/~"로 연결된다.

---

참고

https://www.mediaelementjs.com/

MediaElement.js는 HTML5의 <audio> 태그를 어디서나 사용할 수있는 드롭-인 자바 스크립트 라이브러리이다. 이 자바스크립트를 사용하는 이유는 HTML5 <audio>를 적용해서 여러 웹브라우저(Google Chrome, Microsoft Edge, Apple Safari, Mozilla Firefox 등)에서 로딩하면 오디오 제어기의 형상이 웹브라우저 마다 다르게 나타난다. 따라서 자바스크립트와 HTML5을 지원하는 어떤 웹브라우저를 사용해도 같은 제어기 모습을 유지할 수 있는 장점이 있다.

추가로 MediaElement.js는 <audio> 뿐만 아니라 <video> 태그도 처리할 수 있다.

MediaElement.js 테스트 1

---

MediaElement.js 테스트 2

---