网页 H5 播放音频 audio 问题记录

Posted 2023-05-12

参考技术A h5 标签 audio 不允许在没有用户操作时进行自动自动播放。否则会报一个 DOMException: play() failed because the user didn't interact with the document first. 的错误。

必须由用户操作一个页面（随便点下哪里）才行。

如果在音频未加载完成就调用 play 用报 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). 或者 Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. 。需要 oncanplay 之后再播放。

如果 <video> 正在播放，请停止 <audio>

【中文标题】如果 <video> 正在播放，请停止 <audio>

【英文标题】：If <video> is playing stop <audio>

【发布时间】：2011-05-27 13:22:12

【问题描述】：

在网页上，我使用几个音频标签来播放鼠标声音，并使用一个视频标签来播放视频。

现在，在播放视频时，应该停止并禁用音频。音频是这样触发的：

$(this).mouseover(function() 
    $('audio#' + $(this).attr('title') + '_sound').trigger('play');
);

现在应该添加这样的东西，我已经尝试了一些都不起作用的东西：

$(this).mouseover(function() 
    if($('#video') is NOT playing) 
        $('audio#' + $(this).attr('title') + '_sound').trigger('play');
    
);

以前有人做过类似的东西吗？

任何帮助表示赞赏:-)

谢谢！

【参考方案1】：

HTML5 有一个 paused 属性。

var v = document.getElementsByTagName("video")[0];

$(this).mouseover(function() 
    if(v.paused)  // checks to see if video is paused
       $('audio#' + $(this).attr('title') + '_sound').trigger('play');
    
);

【讨论】：

更多信息请见documentation on paused。

另外，请注意，并非所有浏览器都支持paused属性。

@orftz 感谢您发布文档。你知道有什么好的链接可以提供较少的paused 技术解释吗？当我发布这篇文章时，我正在寻找一个链接来包含它，它不像 W3 文档那么冗长。

我发现的关于paused 的唯一另一件事是this。根本没有关于这个的文档。

【参考方案2】：

您应该注册一个事件监听器，以便在视频标签的暂停信号被断言时被调用。

var v = document.getElementsByTagName("video")[0];
v.addEventListener("pause", function()  audio.trigger("play"); , true);

【讨论】：

这是正确的 js 方式，考虑到 javascript 引入了事件驱动编程

【参考方案3】：

var video = document.getElementById("myVideo");
var music = document.getElementById("myMusic");
var noOverlap = setInterval(
if(myVideo.paused == false)
    myMusic.pause();

, 1000);

这将检查两者是否每秒重叠，默认情况下，播放视频并暂停音乐。