0

I have found a nice HTML 5 audio player with playlist and artwork based on plyr. It works nicely on my desktop browser, but on my mobile device (iOS), it's not playing after pressing play. There's a codepen to demonstrate:

https://codepen.io/gifteconomist/pen/LREwXv

I've tried debugging via mobile browser, but no errors are shown. Any ideas what could be going wrong here? Thanks a lot!

html

<head>
  <meta charset="UTF-8">
  <title>Responsive Audio Playlist with Cover Art Player</title>
  <link rel='stylesheet' href='http://cdn.plyr.io/1.6.13/plyr.css'>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <main>
  <section>
  <div class="playlist">
    <div class="plyr">
      <audio controls></audio>
    </div>
    <ul class='playlist--list'>
      <li data-id="0" data-image="https://www.callofduty.com/content/dam/atvi/callofduty/hub/main-hub/iw-hub/games/key-art/aw-key-art.jpg" data-audio="http://cdn.ascap.com/Member/Jach_Wall/BlackOps3.mp3">Call of Duty: Black Ops 3
         <span class="artist">Jack Wall</span>
      </li>
      <li data-id="1" data-image="https://seussblog.files.wordpress.com/2013/03/143056e8473127ab6a665773884132bc.jpg" data-artist="StarBelly" data-title="Broken Hearts in Stereo" data-audio="http://cdn.ascap.com/network/audioportraits/Starbelly/03.mp3">Broken Hearts in Stereo
        <span class="artist">Starbelly</span>
      </li>
      <li data-id="2" data-image="http://east.myna1.net/wp-content/uploads/sites/24/2016/03/nathan-east-pic.jpg" data-audio="http://cdn.ascap.com/Member/Nathan_East/Approach.mp3">Approach
        <span class="artist">Nathan East</span>
      </li>
    </ul>
  </div>

</section>
</main>
  <script src='http://cdn.plyr.io/1.6.13/plyr.js'></script>
  <script src="js/index.js"></script>
</body>

js

//Using JS Audio Player Plyr

plyr.setup(document.querySelector('.plyr'));
var radio = document.querySelector('.plyr').plyr;

var player = document.querySelector('.playlist');
var playerControls = document.querySelector('.plyr__controls');
var songs = player.querySelectorAll('.playlist--list li');
var i;
var active = null;

for(i = 0; i < songs.length; i++) {
    songs[i].onclick = changeChannel;
}

setSource( getId(songs[0]), buildSource(songs[0]) );

document.querySelector('.plyr').addEventListener('ended', nextSong);

function changeChannel(e) {
    setSource( getId(e.target), buildSource(e.target), true );
  setArt(e.target);
}

function getId(el) {
    return Number(el.getAttribute('data-id'));
}

function buildSource(el) {
    var obj = [{
        src: el.getAttribute('data-audio'),
    image: el.getAttribute('data-image'),
    artist: el.getAttribute('data-artist'),
        type: 'audio/ogg'
    }];

  console.log(obj[0].image);

    return obj;
}

function setSource(selected, sourceAudio, play) {
    if(active !== selected) {
        active = selected;
    playerControls.style.background = "linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.99) 100%), url("+sourceAudio[0].image+")";
        radio.source({
            type: 'audio',
            title: 'test',
      poster: sourceAudio[0].image,
            sources: sourceAudio
        });

        for(var i = 0; i < songs.length; i++) {
            if(Number(songs[i].getAttribute('data-id')) === selected) {
                songs[i].className = 'active';
            } else {
                songs[i].className = '';
            }
        }

        if(play) {
            radio.play();
        }
    } else {
        radio.togglePlay();
    }
}

function setArt(e) {
  console.log(e);
}

function nextSong(e) {
    var next = active + 1;

    if(next < songs.length) {
        setSource( getId(songs[next]), buildSource(songs[next]), true );
    }
}
virt
  • 409
  • 1
  • 4
  • 15

1 Answers1

0

Safari browser doesn't support ogg audio file type make sure you are not using this file type in your browser and also make sure the extension of audio file is correct.

Ankit Kalia
  • 130
  • 4