Waveform microphone plugin is not mobile responsive

[ToJen]

Looks perfect on desktop but the wave becomes too thin.

I'm only using the microphone so waveform.zoom may not be a solution.

This is what I think might be help but it remains the same:

wavesurfer.on('ready', function() { wavesurfer.zoom(100); console.log("zoomed"); });

Here's a screenshot of what it looks like right now.

You can also run the demo plugin here on mobile to see what I mean.

[chrisparton1991]

Hi @ToJen, can you please provide a screenshot? There isn't enough information in your question for me to know what might be the issue.

Try going to https://wavesurfer-js.org/ on your mobile device, does the waveform look okay for you there? If so, the issue is likely with your HTML file not having the correct viewport settings (see https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag).

[ToJen]

@chrisparton1991 I've just updated the issue with a link to the image.

[ToJen]

@katspaugh is there a way I can use zoom by default?

[thijstriemstra]

@ToJen, can you provide a better description? waveform is not mobile responsive can mean many things. Cheers.

[ToJen]

@thijstriemstra hi, i meant to say that while I using the microphone.js plugin on a mobile device, the waves generated are really thin and appear to be just a line.

I attached a screenshot to the original question above ^^^

[thijstriemstra]

@ToJen what browser? what platform? the waveform looks like room ambient noise, what kind of audio are you providing in that example?

[ToJen]

@thijstriemstra on firefox, chrome, safari for android and iOS. I've tested with loud music right in front of the microphone and it only comes up as tiny spikes.

[ToJen]

But the thing is, if you launch mobile view on chrome(desktop), it'll come out looking fine. Try this on your phone and see what I mean.

[thijstriemstra]

@ToJen what device?

[ToJen]

@thijstriemstra do you mean the device i'm testing it on? iPhone 5 and 6, LG l90, samsung galaxy, google nexus, different types

[thijstriemstra]

yep. cool thanks, I'll test and post a screenshot asap.

[ToJen]

alright, thank you!

[ToJen]

@thijstriemstra were you able to see what I was talking about

[entonbiba]

@ToJen you can make it responsive with the following for now.

$(window).resize(function() {
  wavesurfer.empty();
  wavesurfer.drawBuffer();
});

[ToJen]

Hello @entonbiba,

Thanks but the waveform still remains really thin on mobile view even after using that.

[entonbiba]

@ToJen try adding height: 256 and barWidth: 10 to wavesurfer.init.

[ToJen]

@entonbiba thanks, height increases the height of the waveform div but not the actual waves. Do you see what I mean?

Thanks again.

[thijstriemstra]

I couldn't reproduce it on Android 6 using latest Firefox. Loud speech or music brings the microphone waveform at around 90% of the waveform div.

[ToJen]

@thijstriemstra hmm yes, it looks good on the mobile view of browsers but on an actual phone it shrinks to a very thin line. I also thought it was working perfectly when I tested different screen sizes in Chrome's dev mode but after testing on the real phones it turned out differently.

Would the zoom function do anything to help?

[entonbiba]

@ToJen there is parameter called barWidth, try changing that to like 10 or something and see what happens? The microphone plugin might require a custom parameter to allow for larger waveform bar heights.

[ToJen]

@entonbiba hey, i did that yesterday and it increases the width but i think for design consistency i may have to use a curved waveform.

is there a barHeight parameter? since it's really the height that needs to increase

[entonbiba]

@ToJen no since the height of the waveform should be determined based on peaks of the audio file or in this case the microphone. I'll create an example with a barHeight parameter which will increase the height of the bars and waveform for testing.

[ToJen]

@entonbiba that sounds good, thanks!

[ToJen]

Hey @entonbiba, any luck yet? Is there something I can do? I'd love to contribute to this.

[entonbiba]

@ToJen hey, yes I'll post the update today.

The following variable will change the bar height, I'll make this into a parameter like "barHeight" or something.
var absmax = 1;

I noticed someone already suggested this feature here as well. #944

[entonbiba]

@ToJen here you go,
http://codepen.io/entonbiba/pen/VpedWZ

[ToJen]

hey @entonbiba thanks, is it available in the current release? I have my script tags like this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.4/wavesurfer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.4/plugin/wavesurfer.microphone.min.js"></script>

[mspae]

@ToJen The PR isn't merged/released yet.

[ToJen]

@mspae Oh cool, thanks!

[entonbiba]

@ToJen the update barHeight should be available shortly on version 1.3.5 #1036.