Audio.play()在鼠标点击事件中可以正常工作，但在触摸事件中无法工作，显示“DOMException:play()failedbecausetheuserdidn'tinteractwiththedocument”。
创始人
2024-09-22 02:31:31
0次

触摸事件需要用户的主动参与，因此一些浏览器阻止了自动播放声音。为了解决这个问题，可以在触摸事件的回调函数中添加一个空的音频播放，并在用户触摸屏幕后立即播放声音。以下是示例代码：

// 声音文件的URL
const audioUrl = "path/to/sound.mp3";
// 创建 Audio 对象
const audio = new Audio(audioUrl);

// 在触摸事件回调函数中添加音频播放
document.addEventListener("touchstart", function() {
  // 设置音频播放器的音量为 0
  audio.volume = 0;
  audio.play().then(function() {
    // 在音频播放时将音量调整为 1，以使声音正常播放
    audio.volume = 1;
  });
});

上一篇：Audio.play()在iOS用户代理下不起作用。

下一篇：audio.play()在现有函数中可以工作，但作为单独的函数不起作用。

相关内容

热门资讯

Android Studio ... 要解决Android Studio 4无法检测到Java代码，无法打开SDK管理器和设置的问题，可以...
安装tensorflow mo... 要安装tensorflow models object-detection软件包和pandas的每个...
安装了Laravelbackp... 检查是否创建了以下自定义文件并进行正确的配置config/backpack/base.phpconf...
安装了centos后会占用多少... 安装了CentOS后会占用多少内存取决于多个因素，例如安装的软件包、系统配置和运行的服务等。通常情况...
按照Laravel方式通过Pr... 在Laravel中，我们可以通过定义关系和使用查询构建器来选择模型。首先，我们需要定义Profile...
按照分类ID显示Django子... 在Django中，可以使用filter函数根据分类ID来筛选子类别。以下是一个示例代码：首先，假设你...
Android Studio ... 要给出包含代码示例的解决方法，我们可以使用Markdown语法来展示代码。下面是一个示例解决方案，其...
Android Retrofi... 问题描述：在使用Android Retrofit进行GET调用时，获取的响应为空，即使服务器返回了正...
AmazonsS3Client... 可以通过在代码中添加host属性来解决这个问题。具体步骤如下所示：1.将S3客户端的建立方法中的环境...
Alexa技能在返回响应后出现... 在开发Alexa技能时，如果在返回响应后出现问题，可以按照以下步骤进行排查和解决。检查代码中的错误处...