IOS 17.4 - Wavesurfer doesn't play.....

[Gigamick]

I'm using V 6.2.0

plays fine on all devices / browsers except iPhones rocking iOS 17.4 beta.

Any ideas?

[katspaugh]

I don’t support v6 anymore, sorry. Please try with v7 and see if that works.

[Gigamick]

I don’t support v6 anymore, sorry. Please try with v7 and see if that works.

it's fine it looks like its an ios17.4 problem. Spotify web player isn't working either. You should test V7 on an iOS device running the latest beta...... or don't, I guess lol.

[katspaugh]

I'd wait till it's out of beta, maybe they'll fix it.

[alexcraviotto]

I'm using V 6.2.0

plays fine on all devices / browsers except iPhones rocking iOS 17.4 beta.

Any ideas?

Did you fix that?

[CalvinJamesHeath]

Im having the same issue. Wavesurfer never loads, everything else is called and works correctly on Android, Chrome, and Safari on Mac OS, but didn't work on any iphone I tried.

I tracked it down and it appears that the on ready event is never fired.

wavesurfer.on('ready', () => {
					console.log('wavesurferRef.ready');
					setLoading(false);
					setDuration(formatTime(wavesurfer.getDuration()));
				});

[katspaugh]

Thanks for the heads up. Like I said I won’t be fixing it until it’s out of beta as it may well be fixed on the iOS side by that time.

[CalvinJamesHeath]

@katspaugh Do you have any suggestions or recommendations for temporary solutions or workarounds that could help me achieve functionality on iOS devices, I would greatly appreciate any guidance you can provide because its really important for the project since Im deploying next week

[katspaugh]

You could pre-decode the audio. See this example. You can use bbc/audiowaveform to generate peaks.

[CalvinJamesHeath]

@katspaugh I just grabbed the peaks from the example

peaks: [ [ 0, 0.0023595101665705442, 0.012107174843549728, 0.005919494666159153, -0.31324470043182373, 0.1511787623167038, 0.2473851442337036, 0.11443428695201874, -0.036057762801647186, -0.0968964695930481, -0.03033737652003765, 0.10682467371225357, 0.23974689841270447, 0.013210971839725971, -0.12377244979143143, 0.046145666390657425, -0.015757400542497635, 0.10884027928113937, 0.06681904196739197, 0.09432944655418396, -0.17105795443058014, -0.023439358919858932, -0.10380347073078156, 0.0034454423002898693, 0.08061369508504868, 0.026129156351089478, 0.18730352818965912, 0.020447958260774612, -0.15030759572982788, 0.05689578503370285, -0.0009095853311009705, 0.2749626338481903, 0.2565386891365051, 0.07571295648813248, 0.10791446268558502, -0.06575305759906769, 0.15336275100708008, 0.07056761533021927, 0.03287476301193237, -0.09044631570577621, 0.01777501218020916, -0.04906218498945236, -0.04756792634725571, -0.006875281687825918, 0.04520256072282791, -0.02362387254834175, -0.0668797641992569, 0.12266506254673004, -0.10895221680402756, 0.03791835159063339, -0.0195105392485857, -0.031097881495952606, 0.04252675920724869, -0.09187793731689453, 0.0829525887966156, -0.003812957089394331, 0.0431736595928669, 0.07634212076663971, -0.05335947126150131, 0.0345163568854332, -0.049201950430870056, 0.02300390601158142, 0.007677287794649601, 0.015354577451944351, 0.007677287794649601, 0.007677288725972176, ], ],

and used that and I can see the generated peaks on all other devices and play the audios except on IOS mobile devices. Wavesurfer on ready is never called on IOS. What else should I do?

PS: I think I have a different issue since no audio will play on IOS Safari even with the basic audio tag, I will update tomorrow.

[CalvinJamesHeath]

Audios work correctly only when I specify the type in IOS safari, for the rest of browsers I didnt have to:

<audio controls>
<source src={fileUrl} type='audio/mpeg' />
Your browser does not support the audio tag.
</audio>

And for wavesurfer I added:

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  mediaType: 'audio/mpeg', // Specify the audio file type,
  backend: 'WebAudio', // add this too 
  // Other options...
});

And it all works perfectly. Thank you.

[andyandye]

I found the same issue in v7 on Safari as the 'ready' event was not firing. I resolved it by adding backend: 'WebAudio',

as suggested above

[CalvinJamesHeath]

The new issue now is that since we have to use backend: 'WebAudio' the playback pitch shifts and doesnt preserve. If backend is set to 'MediaElement' the pitch stays the same but you go back to square 1 as it will work fine on everything except IOS safari and MAC OS safari.

[psavva]

We are also facing this issue. Adding WebAudio breaks other things

[katspaugh]

Any particular audio format? The examples on https://wavesurfer.xyz/examples/ work for me on iOS 17.4.1.

[psavva]

We are using mp3 files

[toumbas]

We are facing the same issue Thanks @katspaugh

[katspaugh]

@toumbas thanks for the sponsorship! 💖 Can you link or upload the problematic audio?

[pierluigi]

Adding backend: "WebAudio" as others suggested seems to have no impact on the multitrack example.

It appears this.audioContext.state is always suspended and no events are being triggered by the WebAudioPlayer element.

[katspaugh]

Just tested on my iPhone (iOS 17.4.1) and it works fine. If anyone still has this issue, please feel free to reopen it and upload the audio that fails to play along with your wavesurfer settings.

[CalvinJamesHeath]

Now it works again when I set backend: 'MediaElement'. However, on mobile, the progress bar is very buggy. When I start playing an audio file, the progress bar jumps forward a couple of inches, then moves back one inch before continuing smoothly to the end. This happens every time I play an audio file.

With backend: 'WebAudio', I did not experience this issue.