Аудио не загружается в мобильном браузере (плеер Plyr) - PullRequest
Новая
       36

Аудио не загружается в мобильном браузере (плеер Plyr)

0 голосов
/ 13 марта 2019

Я нашел хороший аудиоплеер HTML 5 с плейлистом и обложками на основе plyr. Он хорошо работает в моем браузере на рабочем столе, но на моем мобильном устройстве (iOS) он не воспроизводится после нажатия кнопки воспроизведения. Для демонстрации есть кодекс:

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

Я пробовал отладку через мобильный браузер, но ошибки не отображаются. Есть идеи, что здесь может пойти не так? Большое спасибо!

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 );
    }
}
...