Question

我发现了一个不错的HTML 5音频播放器，其中包含基于plyr的播放列表和插图。它可以在我的桌面浏览器上很好地工作，但是在我的移动设备（iOS）上，按Play后不能播放。有一个Codepen可以演示：

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

Answer 1

Safari浏览器不支持ogg音频文件类型，请确保您未在浏览器中使用此文件类型，并确保音频文件的扩展名正确。

音频未在移动浏览器（Plyr播放器）上加载

1 个答案: