时间戳

首页 > 解决方案 > iOS Safari Web Audio API 限制问题

javascript - iOS Safari Web Audio API 限制问题

问题描述

我目前正在构建一个 Web 音频播放器，它已经在所有主要的桌面浏览器上运行。但是，iOS 上的 Safari 在其自动播放限制方面有一个非常奇怪的行为。

当用户加载音频播放器时，他有两个选项来开始播放曲目。他要么单击播放控件底部明显的播放按钮（I 元素），要么单击播放列表中的曲目（div 元素）。

这两个选项执行相同的代码，唯一的区别是事件处理程序。

播放按钮选项有效，Safari 并没有抱怨它。播放列表项单击选项不起作用。Safari 给我这个错误：

Unhandled Promise Rejection: NotAllowedError: 在当前上下文中，用户代理或平台不允许请求，可能是因为用户拒绝了权限。

Safari 是否限制使用哪种元素单击事件处理程序？

这是两个选项的代码：

var ePlay = jQuery('.player .player-controls .play-toggle'); 
// <--- <i> Element
var ePlaylistSingleTrack = jQuery('.player .playlist .single-track'); 
// <--- DIV Element

jQuery(ePlay).click(function(){
    if (audioElement.paused){
        playAndVisualize();
    } else {
        audioElement.pause();
        jQuery(this).removeClass('fa-pause-circle');
        jQuery(this).addClass('fa-play-circle');
    }
});

jQuery(ePlaylistSingleTrack).click(function(){
    if (audioElement.paused){
        playAndVisualize();
    } else {
        audioElement.pause();
        jQuery(this).removeClass('fa-pause-circle');
        jQuery(this).addClass('fa-play-circle');
    }
});

编辑 1：我尝试使用标准事件侦听器而不是使用 jquery。没有变化。我也尝试使用 I - Element 而不是 div，但这也没有帮助。

标签： javascriptiossafariweb-audio-api

解决方案

因此，Mobile Safari 不喜欢虚假的点击事件，因为它是一种触摸设备。你必须使用触摸事件。通常我在所有项目上都这样做，因为它解决了我在移动 safari 中遇到的其他问题。

var myEvent = ('ontouchstart' in document.documentElement) ? 'touchend' : 'click';

document.querySelector('.your-selector-here').addEventListener(myEvent, function () {
    // Your Listener here
});

推荐阅读