티스토리, 오디오 파일 넣기

 

    

 

에디터에서의 문제점

 

구에디터로 작성했던 글은 브라우저 내장 플레이어로 보여주는데,

글을 수정하는 순간 다운로드 링크로 바뀐다..

새 글에서 오디오 파일 첨부를 해도 마찬가지다..

 

스크립트 처리를 해서 글을 수정하는 번거로움을 피할 수도 있지만,

모바일에서 스크립트가 안 먹히는 경우가 있기에 일장일단이 있다..

 

최선의 방법은 HTML 태그를 직접 넣어주는 것!

이 방법의 단점은 귀찮다는 것이지만, 서식 기능을 이용하면 그 귀찮음이 줄어들기도..

 

 

 

 

 

audio 태그 넣기

 

아래의 서식을 하나 만들어둔다..

HTML
<p style="text-align:center">
  <audio controls style="outline-style:none" src="https://blog.kakaocdn.net/dn/">
  </audio>
</p>

 

 

글 작성시,

오디오 파일을 첨부하고 곧바로 위의 서식을 넣어준다..

글쓰기 모드를 기본모드에서 HTML으로 바꾸고 해당 부분을 보면 아래와 같다..

 

<p>[##_File|kage@o0NeN/btq2irDkUnr/v9ArXCYdnwv7oGKSdgYcM1/tfile.mp3|filename="..."</p>

<p style="text-align:center">

<audio controls style="outline-style:none" src="https://blog.kakaocdn.net/dn/">

</audio>
</p>

 

- 첫째줄의 골뱅이 다음 단어부터 파일 확장자까지 복사한 다음

- 첫째줄은 주석처리

- audio 태그의 src 속성값에 이어서 붙여넣기

 

아래처럼 수정하면 된다..

 

<!--<p>[##_File|kage@o0NeN/btq2irDkUnr/v9ArXCYdnwv7oGKSdgYcM1/tfile.mp3|filename="..."</p>-->

<p style="text-align:center">

<audio controls style="outline-style:none" src="https://blog.kakaocdn.net/dn/o0NeN/btq2irDkUnr/v9ArXCYdnwv7oGKSdgYcM1/tfile.mp3">

</audio>
</p>

 

 

 

 

 

스크립트 처리를 해야된다면..

 

JAVASCRIPT
/* Javascript */

if (document.querySelector('body').id == 'tt-body-page' && document.querySelector('.fileblock')) {
    document.querySelectorAll('.fileblock').forEach(function(e){
        let fname = e.querySelector('.desc .filename').innerText;
        let exp = fname.slice(-3, fname.length);
        if ( exp == 'mp3' || exp == 'm4a' || exp == 'wav' ) {
        	let nOpt = 'yes'; // 플레이어 아래쪽에 파일명 출력할 것인지 여부 || yes or no
            let audiofile = e.firstChild.getAttribute('href');
            e.classList.add('audiofile');
            if (nOpt == 'yes') {
            	e.innerHTML = '<audio controls style="outline-style:none" src="' + audiofile + '"></audio><p title="' + fname + '">' + fname + '</p>'
            }
            else {
            	e.innerHTML = '<audio controls style="outline-style:none" src="' + audiofile + '" title="' + fname + '"></audio>'
            }
        }
	})
}

 

CSS
/* CSS */


/* block */
.fileblock.audiofile { text-align:center; border:0px !important }

/* audio player */
.fileblock.audiofile audio { width:80% }

/* file name */
.fileblock.audiofile p {
    font-size:small;
    opacity:0.7;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow: hidden
}

 

 

 

 

Demo

 

[Demo] 티스토리, 오디오 파일 넣기