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

php javascript

小斑 2020-02-20 15:33:48 ‧ 2193 瀏覽

分享至

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

目前程式碼如下：

<!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>

但無法呈現出波形圖

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

還請指點...

謝謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

dragonH

iT邦超人 5 級 ‧ 2020-02-20 16:13:13

最佳解答

codepen

看你的 console 有無訊息

我測試沒問題

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

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

小斑 iT邦新手 3 級 ‧ 2020-02-20 16:19:14 檢舉

您好，已先改成您的.wav來測試，console 訊息如下圖：

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

小斑

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

這錯誤訊息很白話

找不到 element

小斑 iT邦新手 3 級 ‧ 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>