iT邦幫忙

1

(已解決)使用 wavesurfer.js 顯示聲音的波形圖

我正試試使用 wavesurfer.js 顯示聲音的波形圖

參考了 GitHub 說明此範例

目前程式碼如下:

<!doctype html>
<html style="background-color:#ECEBE8;">
<head>
<meta charset="utf-8" />
<title>wavesurfer</title>
<script src="https://unpkg.com/wavesurfer.js"></script>
<script type="text/javascript">
	var wavesurfer = WaveSurfer.create({
		container: '#waveform',
		waveColor: 'violet',
		progressColor: 'purple'
	});
	wavesurfer.load('voice/test.wav');
</script>
</head>
<body>
	<div id="waveform" class="waveform"></div>
</body>
</html>

但無法呈現出波形圖

不知道是否哪裡使用錯誤?

還請指點...

謝謝

1 個回答

4
dragonH
iT邦超人 6 級 ‧ 2020-02-20 16:13:13
最佳解答

codepen

看你的 console 有無訊息

我測試沒問題

我會先猜你的 wav 沒有先用 static server 來 serve

看更多先前的回應...收起先前的回應...
小斑 iT邦新手 4 級 ‧ 2020-02-20 16:19:14 檢舉

您好,已先改成您的.wav來測試,console 訊息如下圖:
https://ithelp.ithome.com.tw/upload/images/20200220/20106496NpJfxEaoQS.jpg

dragonH iT邦超人 6 級 ‧ 2020-02-20 16:25:09 檢舉

小斑

把你 <script> 那些 code 用 window.onload 包起來

這錯誤訊息很白話

找不到 element

小斑 iT邦新手 4 級 ‧ 2020-02-20 16:33:42 檢舉

可以了!太感謝了!^^程式碼修改如下:

<!doctype html>
<html style="background-color:#ECEBE8;">
<head>
<meta charset="utf-8" />
<title>wavesurfer</title>
<script src="https://unpkg.com/wavesurfer.js"></script>
<script type="text/javascript">
	function ShowVoice(){
		var wavesurfer = WaveSurfer.create({
			container: '#waveform',
			waveColor: 'violet',
			progressColor: 'purple'
		});
		wavesurfer.load('https://cors-anywhere.herokuapp.com/https://ccrma.stanford.edu/~jos/wav/cello82.wav')
		wavesurfer.on('ready', function () {
			wavesurfer.play();
		});
	}
</script>
</head>
<body onload="ShowVoice()">
	<div id="waveform" class="waveform"></div>
</body>
</html>

https://ithelp.ithome.com.tw/upload/images/20200220/20106496Aw0RA0CaxU.jpg

dragonH iT邦超人 6 級 ‧ 2020-02-20 16:34:09 檢舉

/images/emoticon/emoticon12.gif

甲土豆 iT邦新手 5 級 ‧ 2020-02-21 09:28:04 檢舉

拜見 H大神 /images/emoticon/emoticon07.gif

我要發表回答

立即登入回答