Audio is not playing in IOS.

[webdevratnesh]

HI,

I have made an audio play button using wave surfer. It works fine on Windows and Android phones but not on IOS devices. Here's the screenshot of the play button https://prnt.sc/3axN4P3Y4kHE

You can also visit the site to get a better idea of it, site URL:- https://www.jekkna.com

Please tell me what I'm missing. Looking for a solution to it ASAP:)

Thanks!

[katspaugh]

Try the beta version, it works better on iOS.

[webdevratnesh]

Can you tell me what could be the possible reason behind it? I have used the beta version, I'm mentioning the complete code which I wrote inside the HTML block in the Elementor editor. Have a look at it.

<script type="module"> var playBtn = document.getElementById("playBtn"); import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta' const wavesurfer = WaveSurfer.create({ container: '#waveform', waveColor: 'white', progressColor: 'rgb(58,157,217)', url: 'https://www.jekkna.com/wp-content/uploads/2023/05/WolofAudioHomepage-JEKKNA.m4a', responsive: true, barWidth: 3, barHeight: 2, height: 50, }) playBtn.onclick = function() { wavesurfer.playPause(); if (playBtn.src.includes("https://www.jekkna.com/wp-content/uploads/2023/05/JekknaPlayWolof.png")) { playBtn.src = "https://www.jekkna.com/wp-content/uploads/2023/05/JekknaPauseWolof.png" } else { playBtn.src = "https://www.jekkna.com/wp-content/uploads/2023/05/JekknaPlayWolof.png" } } wavesurfer.on('finish', function() { playBtn.src = "https://www.jekkna.com/wp-content/uploads/2023/05/JekknaPlayWolof.png"; wavesurfer.stop(); }) </script>

<style> .music { width: 100%; background-color: rgb(59, 59, 59); border-radius: 0px 10px 10px 10px; padding: 0px 0px 0px 0px; }

.track {
display: flex;
align-items: center;
}

.track div {
flex: 1;
}

.track .last {
height: 70px;
}

.track .first {
height: 40px;
}

@media screen and (max-width: 768px) {
.music {
width: 250px;
}

.track .last {
  height: 55px;
}

.track .first {
  height: 35px;
}

}

@media screen and (max-width: 400px) {
.track {
display: flex;
}

.track .last {
  height: 40px;
}

.track .first {
  height: 25px;
}

}
</style>

[katspaugh]

Looks like it's m4a-related. See #2799.

I've tested it and it doesn't play on iOS Safari, but works on desktop Safari.

Try using a different file format (e.g. mp3).

[webdevratnesh]

Thanks a lot, Katspaugh it worked. Now it's working on IOS as well.