我发现了一个不错的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 );
}
}
Safari浏览器不支持ogg音频文件类型，请确保您没有在浏览器中使用此文件类型，还请确保音频文件的扩展名正确。