Response title
This is preview!
On urbansunsets.com, I have implemented radio streaming in HTML5 and JavaScipt (jQuery). There is an error on iPhones.
The code:
HTML
- <div class="col-lg-12 col-sm-12">
- <div id="radio_player">
- <div class="default-player">
- <audio width="320" height="240" controls playsinline id="audio_player">
- <source id="player_source" src="http://public.radio.co/stations/sedf8bacc9/m3u" type="audio/mpeg">
- </audio>
- </div>
- <div id="audioplayer">
- <button id="pButton" class="pause"></button>
- <div class="live">Livee</div>
- <div id="volume_control">
- <label id="rngVolume_label" for="rngVolume">
- <i class="fa fa-volume-up" aria-hidden="true"></i>
- </label>
- <input type="range" id="rngVolume" min="0" max="1" step="0.01" value="0.5">
- </div>
- <div class="current-piece">
- <div class="now-playing">Now playing:</div>
- <div id="song_name">
- <script src="https://public.radio.co/embed/sedf8bacc9/song.js"></script>
- </div>
- </div>
- </div>
- </div>
- </div>
jQuery:
- (function() {
- setTimeout(function(){
- document.getElementById("audio_player").play();
- }, 300);
- var music = document.getElementById('audio_player');
- function playAudio() {
- if (music.paused) {
- music.play();
- pButton.className = "";
- pButton.className = "pause";
- } else {
- music.pause();
- pButton.className = "";
- pButton.className = "play";
- }
- }
- $('#pButton').on('click', playAudio);
- $(function() {
- var timeout
- $("audio").on({
- pause: function() {
- clearTimeout(timeout)
- },
- play: monitor
- })
- $("#rngVolume").on("input",function(){
- $("audio").prop("volume",this.value)
- })
- });
- function monitor() {
- $("#rngVolume").val($("audio").prop("volume"))
- $.ajax("https://public.radio.co/stations/sedf8bacc9/status", {
- cache: false
- }).then(function(data) {
- $(".title").text(data.current_track.title)
- $(".data").text(JSON.stringify(data, 4, 4))
- $(".artwork").attr("src", data.current_track.artwork_url)
- timeout = setTimeout(monitor, 1000 * 60)
- })
- }
- })();
The error:
Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().
I have only seam it on iPhones.
What is the cause of this error?
1
