HTML5 音频加载和播放无法在 iPad 上运行

Posted

技术标签:

【中文标题】HTML5 音频加载和播放无法在 iPad 上运行【英文标题】:HTML5 audio load and play won't work on the iPad 【发布时间】:2012-09-14 05:35:20 【问题描述】:

我已经尝试了所有我能想到的解决方案,但仍然无法让它发挥作用。我可以在包括 iPhone 在内的每个浏览器中加载和播放 mp3 或 ogg,但唯一剩下的前沿是 iPad,并且无法播放音频。当我点击歌曲时,它将代码加载到音频播放器 src 但它不播放歌曲。同样,这适用于所有其他支持 html5 的浏览器,但 iPad 不播放该文件。如果我将文件路径粘贴到代码中,歌曲就会播放,所以我认为它与加载和播放功能有关,但我无法弄清楚究竟是什么。

下面是相应的代码。任何帮助都会非常感激。提前致谢。

HTML

<div id="song-title-display"></div>

        <div id="song-title">
        <ul class="list">
        <li><a class="tracks selected" id="1_tracks" href="1" data-file="song1">Song1</a></li>
        <li><a class="tracks" id="2_tracks" href="2" data-file="song2">Song2</a></li>
        </ul>
        </div>

    <audio id="audio-player" name="audio-player">
    <source id="source-file1" src="" type="audio/mpeg">
    <source id="source-file2" src="" type="audio/ogg">
    </audio>

JS

$("#song-title a").click(function() 
  var name = $(this).html(),
      filename = $(this).attr("data-file");
      filename2 = "uploadedsongsfolder" + filename;
      filename3 = "uploadedsongsfolder" + filename + ".mp3";
      filename4 = "uploadedsongsfolder" + filename + ".ogg";
    $('#song-title-display').html($(this).html());
     clickedID=$(this).attr('href');
     $('.tracks').removeClass('selected'); $('#'+clickedID+'_tracks').addClass('selected');

    document.getElementById('source-file1').src =   filename3;
    document.getElementById('source-file2').src =   filename4;
    $("#audio-player")[0].load();
    $("#audio-player")[0].play();
    return false;

【问题讨论】:

您是否尝试过在运行时创建音频标签然后评估脚本? 是的,我没有运气。同样,奇怪的是它可以在 iPhone 上的 Safari 5 的早期移动版本中运行,但在 iPad 上却不能运行。在我将“类型”添加到源标签之前,它在 iPhone 上不起作用。这让我相信它真的很愚蠢。 那么,这个 uploadsongsfolder 这个文件夹在哪里,这是一个 weburi 还是服务器中的某个文件夹? 您解决了这个问题吗?我在 iPad 上播放音频 (mp3) 文件时也遇到了问题;并且仅在 iPad 上!就我而言,它会播放前几分钟(一个 30 分钟的 mp3 文件)然后重新启动。 (?) 【参考方案1】:

试试这个:

$("#audio-player")[0].addEventListener('canplaythrough', mobileReady, false);

function mobileReady()

  $("#audio-player")[0].play() 


【讨论】:

以上是关于HTML5 音频加载和播放无法在 iPad 上运行的主要内容,如果未能解决你的问题,请参考以下文章

Ipad 无法在我的网络应用程序上同时播放音频和视频

HTML5 音频“触发播放”在 iPad 上不起作用

html5 视频无法在 iPad 上播放 - 在 iPhone 上播放

videojs 播放器无法在 iPad 上运行

iOS Web 应用上的 HTML5 音频

如何在 ipad 上使用 javascript 在网络浏览器中播放 wav 文件