I run my own online radio station using a simple embedded audio player to stream. The stream works on all browsers on Mac, Windows, and Android. It does not stream in Safari or any browser on iOS. Here is the HTML code I am using:
<audio controls="true" autoplay="false"><source src="https://108.59.11.81:8040/;audio.mp3" type="audio/mp3">Your browser does not support the audio element.</audio>
I am seeking any means to modify the code so Safari and iOS will stream.
Thank you very much.
I worked with an Apple Senior Advisor who suggesting it may be a codec issue, but all of the solutions I tried which failed. He suggested I post the issue here.
I did not find an other posts similar to my issue with solutions that worked.
Here are two solutions I tried:
<audio controls>
<source src="https://108.59.11.81:8040/;audio.mp3" type="audio/mp3; codecs=mp3">
and
<audio controls>
<source src="https://108.59.11.81:8040/;audio.mp3" type="audio/mpeg" />
</audio>
Use a third-party player, for example Howler.js.
Here is a code sample:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
<script>
// Create a new Howl object
var sound = new Howl({
src: ['audio.mp3'],
format: ['mp3'], // Specify the format, in this case, mp3
html5: true // Use HTML5 audio for streaming
});
// Event handlers for buttons
document.getElementById('play').addEventListener('click', function() {
sound.play();
});
document.getElementById('pause').addEventListener('click', function() {
sound.pause();
});
document.getElementById('stop').addEventListener('click', function() {
sound.stop();
});
</script>
</body>
</html>1