Wavesurfer.js not loading locally or from server
Question
Would anyone be able to spot the issue here?
<script>
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
var song = 'http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3'
wavesurfer.load(song);
wavesurfer.on('ready', function () {wavesurfer.play();});
</script>
The above code example from the wavesurfer site is working. If I intitialize the variable with the SAME mp3 locally: var song = 'audio/song_cjrg_teasdale_64kb.mp3'
or I initialize the variable from a server: var song = ' http://jamesdoe.byethost9.com/jonikae/audio/song_cjrg_teasdale_64kb.mp3 '
neither will work. Is anyone able to identify why wavesurfer will not cooperate?
1 answers
solution1
1 ACCPTED 2016-12-08 13:57:24
First you need to include Wavesurfer.js to your document. Then you should have any container in document (that you picked to 'container' property WaveSurfer.create({});) Also is important to run script after container initialization (better at the end of document, when container has been created).
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script>
</head>
<body>
<div id="waveform"></div>
</body>
<script>
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
var song = 'http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3'
wavesurfer.load(song);
wavesurfer.on('ready', function () {wavesurfer.play();});
</script>
</html>
UPD Also there is a mistake in the include script at the wavesurfer-js website.
<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script>
It should be like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.0.52/wavesurfer.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.