오디오 파일을 파싱하여 파형 출력 - js
4514 단어 HTML자바스크립트HTTPSwavesurfer.js
설명
음성 파일을 해석해 파형을 브라우저에 출력해 보고 싶습니다. 음성 파일은, 어디에 있어도 되지만 (자신의 서버중이라든지) http 혹은 https 통신이 가능한 환경이 아니면 안됩니다.
구현 자체는 wavesurfer.js라는 멋진 프레임 워크를 사용하여 비교적 쉽게 구현할 수 있습니다. 상대적으로 ... 아니 정말 쉽습니다! .
환경
실행
실제로 실행해 보면 이렇게 됩니다. 파형의 색을 바꾸거나 재생 위치를 직관적으로 조작할 수 있습니다.
단지 이것만
단 6행으로 음성 파일을 해석하여 파형을 출력할 수 있게 됩니다.
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'black',
progressColor: 'purple'
});
wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');
구현
사운드 소재, CDN이 사라지지 않는 한 copipe로 움직일 것. 스스로 wavesurfer.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<div id="waveform"> </div>
<div style="text-align: center">
<button class="btn btn-primary" onclick="wavesurfer.playPause()">
<i class="glyphicon glyphicon-play"></i>Play</button>
</div>
<script language="JavaScript">
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'black',
progressColor: 'purple'
});
wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');
</script>
</body>
</html>
Reference
이 문제에 관하여(오디오 파일을 파싱하여 파형 출력 - js), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rh_/items/ff22cb296dc3b242da1d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
단 6행으로 음성 파일을 해석하여 파형을 출력할 수 있게 됩니다.
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'black',
progressColor: 'purple'
});
wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');
구현
사운드 소재, CDN이 사라지지 않는 한 copipe로 움직일 것. 스스로 wavesurfer.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<div id="waveform"> </div>
<div style="text-align: center">
<button class="btn btn-primary" onclick="wavesurfer.playPause()">
<i class="glyphicon glyphicon-play"></i>Play</button>
</div>
<script language="JavaScript">
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'black',
progressColor: 'purple'
});
wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');
</script>
</body>
</html>
Reference
이 문제에 관하여(오디오 파일을 파싱하여 파형 출력 - js), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/rh_/items/ff22cb296dc3b242da1d
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<div id="waveform"> </div>
<div style="text-align: center">
<button class="btn btn-primary" onclick="wavesurfer.playPause()">
<i class="glyphicon glyphicon-play"></i>Play</button>
</div>
<script language="JavaScript">
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'black',
progressColor: 'purple'
});
wavesurfer.load('https://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3');
</script>
</body>
</html>
Reference
이 문제에 관하여(오디오 파일을 파싱하여 파형 출력 - js), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/rh_/items/ff22cb296dc3b242da1d텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
