iPad 上的 JS .play() 播放错误的文件...建议？

Posted 2023-03-14

【中文标题】iPad 上的 JS .play() 播放错误的文件...建议？

【英文标题】：JS .play() on iPad plays wrong file...suggestions?

【发布时间】：2011-07-26 02:37:25

【问题描述】：

所以，我正在构建一个 Web 应用程序，该应用程序有一个 div，其中的文本会随着各种用户操作而变化（它正在逐步浏览一组文本）。我正在尝试向其中添加音频，因此我在适当的位置制作了另一个包含声音文件的数组：

var phrases=['Please hand me the awl.','etc1','etc2','etc3'];
var phrasesAudio=['awl.mp3','etc1.mp3','etc2.mp3','etc3.mp3'];

在每个动作完成时，一个“计数器”变量递增，每个数组在该计数器处查找对象

var audio  = document.createElement("audio"),
canPlayMP3 = (typeof audio.canPlayType === "function" &&
              audio.canPlayType("audio/mpeg") !== "");
function onAction()
correct++;
document.getElementById('speech').innerhtml=phrases[correct];
if(canPlayMP3)
    snd = new Audio(phrasesAudio[correct]);

else
    snd = new Audio(phrasesAudioOgg[correct]);

snd.play();

（文本替换了 div 的 HTML，我使用 .play() 作为音频对象）...通常可以正常工作（并且总是在“真实”浏览器中），但在 iPad 上（实际目标设备）在几次成功的迭代之后，TEXT 继续准确地进行，但 AUDIO 会打嗝并重复一个声音文件一次或多次。我添加了一些日志记录并在那里查看它报告它正在播放screw.mp3（只是一个示例，没有特定文件或多或少容易出错），但实际上它播放screwdriver.mp3（之前的文件，如果有错误，音频总是滞后，从不领先）...因此我认为问题出在我使用 .play() 上...所以我尝试在每个声音之间设置snd=null;，但没有任何改变...任何关于如何进行的建议？这是我第一次使用音频元素，因此不胜感激。谢谢。

编辑：我也尝试使用 snd.src 设置文件（基于https://wiki.mozilla.org/Audio_Data_API），这导致没有音频播放

【参考方案1】：

对于 iPad，你需要在 snd.play() 之前调用 snd.load() - 否则你会得到“奇怪”的行为......

请参阅：http://jnjnjn.com/187/playing-audio-on-the-ipad-with-html5-and-javascript/ Autoplay audio files on an iPad with HTML5

编辑 - 根据 OP 的评论：

在这里https://developer.mozilla.org/En/Using_audio_and_video_in_Firefox，您可以找到有关使用

停止当前正在播放的媒体的提示

var mediaElement = document.getElementById("myMediaElementID"); 
mediaElement.pause(); 
mediaElement.src = ""; 

然后，设置正确的src、load()、play() 效果很好

【讨论】：

因此，虽然这似乎一开始有效（并且是其中的关键部分）......但有时它仍然会起作用。我在developer.mozilla.org/En/Using_audio_and_video_in_Firefox 找到了一个关于使用var mediaElement = document.getElementById("myMediaElementID"); mediaElement.pause(); mediaElement.src = ""; 停止当前正在播放的媒体片段的提示，然后设置正确的 src、load()、play() 效果很好

刚刚将其添加为 en EDIT 供任何寻求解决方案的人使用...谢谢 :-)