Wavesurfer.js: HTML-INIT examples? anywhere/anyone? thanks greatly

Created on 20 Apr 2016 · 20Comments · Source: katspaugh/wavesurfer.js

Still struggling.

1) I need to use both html-init.js and wavesurfer.js ?
2) by using the wavesurfer tag and barely any code i can call an audio file?

what makes this simple bit of code work - please
http://codepen.io/katspaugh/pen/WQXzpB?editors=100

I have done everything i can to get this to work for many hours over several months.
based on this:
https://github.com/katspaugh/wavesurfer.js/issues/524

DOES anyone have any html page (minimal) that works? where i could simply insert my local audio file's location in it and have it work for me?

sorry

question

Source

tweed

All 20 comments

Maybe this codepen makes more sense to you? http://codepen.io/anon/pen/xVzpYo?editors=1000

Basically, you just need to insert a script tag with wavesurfer.min.js (preferably from a CDN like https://cdnjs.com/libraries/wavesurfer.js) and then the <wavesurfer> tag.

katspaugh on 20 Apr 2016

Hi - I am having initial setup hickups too. I tried your code in the above fiddle, and put it into my page, which of course works beautifully. However I need to dynamically change the data-url.
So I have written a javascript to dynamically update the object, but it fails with an "Uncaught ReferenceError: Invalid left-hand side in assignment", on the following lines(the wavesurfer element now has an id="mywavesurfer", in order to getElementById) :
function loadFile() {
document.getElementById("mywavesurfer").data-wave-color = "violet";
document.getElementById("mywavesurfer").data-progress-color="purple"
document.getElementById("mywavesurfer").data-url="https://ia801404.us.archive.org/23/items/gd79-09-04.sbd.clugston.9452.sbeok.shnf/gd79-09-04Sbdd1t03.mp3";
}
How do I gain access and make dynamic changes in javascript then?

harrietsCreativeDabblets on 20 Apr 2016

The dash symbol is a minus operator for JavaScript. The correct way to set an attribute is this:

document.getElementById("mywavesurfer").setAttribute('data-wave-color', 'violet');

However, it won't work because the HTML initialization is done only once per page load. So if you want to change parameters dynamically, I suggest you just use the regular JavaScript initialization (see the docs).

katspaugh on 20 Apr 2016

Thanks for your quick reply. What do you mean by regular js initialisation?

harrietsCreativeDabblets on 20 Apr 2016

I mean this: http://wavesurfer-js.org/docs/

katspaugh on 20 Apr 2016

Whatever is on that page does not work.

harrietsCreativeDabblets on 20 Apr 2016

I tried one of your examples on http://wavesurfer-js.org/examples/.

In codepen it works, in jsfiddle it does not, and when I copy the exact same code into a html file to run locally it does not work.
Are you gonna update your how to guide for this?

harrietsCreativeDabblets on 20 Apr 2016

👍1

a html file to run locally

If you mean that you open the HTML file in your browser from the hard drive (file:///some-file.html), then it won't work due to security restrictions in the browser. You need to run a web server to serve the file via HTTP.

In codepen it works, in jsfiddle it does not

The example in jsfiddle didn't work for you for similar reasons. It loads the audio file from via http:// while the page itself is https://, so the browser won't let you do that. If you replace the audio URL with https://, it works: https://jsfiddle.net/8kjwv1dv/1/

katspaugh on 20 Apr 2016

OK. So I will just use my server pages then, and not fiddle with the codepen or jsfiddle.

Should

be defined before the call to:
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'red',
progressColor: 'purple'
});

Because I get a runtime error stating that my container element was not found.

harrietsCreativeDabblets on 20 Apr 2016

You need to either put your JavaScript to the bottom of the page like this:

<body>
  <div id="waveform"></div>

  ...

  <script>
    // var wavesurfer = etc
  </script>
<body>

Or call the JavaScript from a DOMContentLoaded listener, like this:

document.addEventListener('DOMContentLoaded', function () {
  // var wavesurfer = etc
});

Otherwise the JavaScript will run before the container element is found on the page.

katspaugh on 20 Apr 2016

Oh, ok. I put the javascript after the the html element definitions. I think DOMContentLoader is maybe more sophisticated, thanks for the tip, will look into it.

So far the app is pretty awesome. I would like to know, if I have a very long audio file, as in 1,5 hours long, how will the timeline plugin react in terms of the labels shown? Will it adapt to bigger intervals?

Secondly if I have a video file which contains audio, will it only play the audio for me?

Last question, my waveform looks funny, I think it only shows part of the whole thing:
. What do you think is wrong? I have the same red / purple styling as in the examples, but mine definitely looks funny.

harrietsCreativeDabblets on 21 Apr 2016

Also, I am trying to add a timeline to the adio graph - it complains about:

harrietsCreativeDabblets on 21 Apr 2016

👍1

patiently waiting... hope you will be here to answer tomorrow :)

harrietsCreativeDabblets on 21 Apr 2016

@harrietsCreativeDabblets, have you included the wavesurfer.timeline.js file in your HTML?

chrisparton1991 on 22 Apr 2016

Also @harrietsCreativeDabblets, I suspect your waveform looks the way it does because 1.5 hours of audio is being rendered into a tiny space, so the peaks of the waveform are being pushed so close together that they're effectively becoming a solid rectangle.

Because you have such a large audio file, you'd need a massive canvas to get a sensible rendering of the waveform. I can see there being performance issues with this though.

Potential performance issues aside, to try this, you can use the MultiCanvas renderer (use the renderer: 'MultiCanvas' property when creating the wavesurfer object), and set the width of your timeline container element to something like 50000px. I'd recommend experimenting with the width to find the smallest possible width that results in a decent looking waveform.

A relevant issue (#700) has been raised to render only a segment of a waveform, but nothing has been implemented for it to my knowledge.

chrisparton1991 on 22 Apr 2016

@harrietsCreativeDabblets For your question " video file which contains audio, will it only play the audio for me?", I tested using an mp4 file from the Internet Archive, and wavesurfer.js behaved as you would like, i.e. the audio is rendered as a waveform and is playable, and the video is ignored.

Your mileage may vary depending on the video format and the format of the audio within the video, but it can't hurt to try it :)

chrisparton1991 on 22 Apr 2016

Hi Chris, thanks for getting back to me. Awesome app.

I am using the CDN link, and wanted to try out the app before downloading and committing to use it in my app. The CDN should strictly speaking have everything included right? I need to get this part going, as seeing where they are in the audio timeline is extremely important to our users.

The image I added is from an audio file 15 seconds long, I am going to try and create a very long one today, to see what the performance is.

harrietsCreativeDabblets on 22 Apr 2016

Hi @harrietsCreativeDabblets, no worries. I hope you're making good progress on your webapp.

The CDN link for wavesurfer.js includes all the core functionality, but the timeline is a plugin that requires an extra JavaScript file. Fortunately, it's also available via CDN.

The CDN links you'll want to use are:
https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.1/wavesurfer.min.js
https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.1.1/plugin/wavesurfer.timeline.min.js

The order in which the scripts are included in your page matters. You need to include the wavesurfer.timeline.min.js file _after_ the wavesurfer.min.js file.

As for the audio file, if it's only 15 seconds long, I'm not sure what's going on off the top of my head. I would need to take a look at the audio file and wavesurfer settings you're using. Maybe updating to use the new CDN links will help (assuming you're not already using v1.1.1).

chrisparton1991 on 22 Apr 2016

Hi Chris, thank you - I got the timeline working.

Now on to make it look better. I think I will download the code now, as I would need to make modifications to it. Thanks for the help so far.

harrietsCreativeDabblets on 22 Apr 2016

I have the same problem as @ harrietsCreativeDabblets to display spectrogram. I have used these ref files.

$(document).ready(function () {
// Init
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: '#D2EDD4',
//progressColor: '#46B54D',
progressColor: 'hsla(293, 100%, 50%, 0.5)',
cursorColor: '#fff',
normalize: true,
barWidth: 3
});
var spectrogram = Object.create(WaveSurfer.Spectrogram);
spectrogram.init({
wavesurfer: wavesurfer,
container: "#wave-spectrogram",
fftSamples: 1024,
labels: true
});
$("#audioUpload").change(function (e) {
readSoundfile(this);
var file = this.files[0];
if (file) {
var reader = new FileReader();
reader.onload = function (evt) {
// Create a Blob providing as first argument a typed array with the file buffer
var blob = new window.Blob([new Uint8Array(evt.target.result)]);
wavesurfer.loadBlob(blob); };
});
});
I can't get it working.