禁用iOS Safari媒体播放器屏幕锁屏滑动条

Question

苹果iOS上的Safari浏览器在锁屏界面为简单的HTMLAudioElements提供了一个快进条，例如：

const a = new Audio();
a.src = 'https://example.com/audio.m4a'
a.play();

JSFiddle: https://jsfiddle.net/0seckLfd/

锁屏界面会允许我选择当前音频文件中的位置。

如何禁用用户在锁屏界面上拖动查看文件？显示元数据是可以的，暂停/播放也可以接受，如果必要的话，禁用所有这些也可以。

- Brad

---

我猜功能是在程序代码中决定的。我只需要一个参考，看看用户是否被允许在锁屏界面上清除文件。然而，设计指南不允许这样做，因为它需要用户采取某些行动才能产生一些效果。 - Gillsoft AB

省略用户更改，除非满足某些条件。例如，if (make_ui_change && user_paid) { ... } 我是这样做的。然后任何被拖动的项目都将正确地重新对齐（但仍然可以拖动而不产生影响）。 - Gillsoft AB

@GillsoftAB 是的，这就是我采取的方法。不幸的是，我无法直接从这些控件获取事件。媒体元素由此操作系统小部件直接控制，因此我只能事后响应。我已经尝试了在“seeked”和“seeking”事件上使用e.preventDefault（）和e.stopPropagation（）等方法，但它们什么也没做。因此，我认为我最好的办法是跟踪时间，然后返回到它。 - Brad

我猜你正在使用类似这样的东西： let aud = document.getElementById("customerAudio"); let ref_time = null; aud.onseeking = function() { ref_time = aud.currentTime; }; 然后你会遇到从参考点开始计时可能会出现问题的情况。你尝试过使用一个活动监听器来拦截这些变化吗？ function seeked_hook() { } document.addEventListener('seeked', seeked_hook, {passive: false}); 另一个选择是“新”的代理对象，它让你拦截几乎任何东西。无论如何，祝你好运 :) - Gillsoft AB

@GillsoftAB 谢谢，是的，我已经尝试过了，并且正在处理一些播放中不稳定的行为，并找出在寻求之前的时间参考。 不幸的是，像 Proxy 或任何其他包装器都没有帮助，因为 Safari 直接到达音频元素本身。 - Brad

Answer 1

完全禁用锁屏播放器

如果您想完全删除锁屏播放器，可以执行以下操作：

const a = new Audio();
document.querySelector('button').addEventListener('click', (e) => {
  a.src = 'http://sprott.physics.wisc.edu/wop/sounds/Bicycle%20Race-Full.m4a' 
  a.play();
});

document.addEventListener('visibilitychange', () => {
  if (document.hidden) a.src = undefined
})

https://jsfiddle.net/5s8c9eL0/3/

当切换选项卡或锁定屏幕时，会停止播放器。 （代码需要根据您的需求进行清理和改进）

- fadomire

---

谢谢，对我来说停止音频不是一个选项，但我点赞了这个答案，因为它可能对其他人有帮助。 - Brad

Answer 2

据我的理解，如果无法将音频标记为现场直播，则无法阻止/隐藏刮痕命令。尽管如此，您可以使用JavaScript拒绝服务器端的刮痕。请参考这里给出的答案。虽然该答案涉及视频，但也适用于音频。

- Seudonym

---

谢谢，是的，我正在防止客户端寻找。虽然不是理想的解决方案，但现在可能是唯一的解决方法。谢谢。 - Brad

Answer 3

使用Web Audio API也可以避免锁屏/控制中心的滑块。

以下是一个预加载声音并播放它的示例，带有评论和错误处理：

try {
    // <audio> element is simpler for sound effects,
    // but in iOS/iPad it shows up in the Control Center, as if it's music you'd want to play/pause/etc.
    // Also, on subsequent plays, it only plays part of the sound.
    // And Web Audio API is better for playing sound effects anyway because it can play a sound overlapping with itself, without maintaining a pool of <audio> elements.
    window.audioContext = window.audioContext || new AudioContext(); // Interoperate with other things using Web Audio API, assuming they use the same global & pattern.
    const audio_buffer_promise =
        fetch("audio/sound.wav")
            .then(response => response.arrayBuffer())
            .then(array_buffer => audioContext.decodeAudioData(array_buffer))
    var play_sound = async function () {
        audioContext.resume(); // in case it was not allowed to start until a user interaction
        // Note that this should be before waiting for the audio buffer,
        // so that it works the first time (it would no longer be "within a user gesture")
        // This only works if play_sound is called during a user gesture (at least once), otherwise audioContext.resume(); needs to be called externally.

        const audio_buffer = await audio_buffer_promise; // Promises can be awaited any number of times. This waits for the fetch the first time, and is instant the next time.
        // Note that if the fetch failed, it will not retry. One could instead rely on HTTP caching and just fetch() each time, but that would be a little less efficient as it would need to decode the audio file each time, so the best option might be custom caching with request error handling.
        const source = audioContext.createBufferSource();
        source.buffer = audio_buffer;
        source.connect(audioContext.destination);
        source.start();
    };
} catch (error) {
    console.log("AudioContext not supported", error);
    play_sound = function() {
        // no-op
        // console.log("SFX disabled because AudioContext setup failed.");
    };
}

- 1j01

---

我无法让它正常工作。无论我在Safari、Chrome或Firefox中尝试任何文件，都会抱怨无法“解码音频数据”或者“传递给decodeAudioData的缓冲区包含未知的内容类型”……即使使用我们当前的<audio>方法，完全相同的路径也可以正常播放。我猜测Web Audio API与音频元素有些不同？ - igorsantos07

Answer 4

我进行了搜索，试图找到一种帮助您的方法，但是我没有找到有效禁用命令的方法，不过我找到了一种自定义它们的方法，这可能会对您有所帮助，请参考苹果教程链接。

我认为现在剩下要做的就是等待，看看iOS 13是否会带来一些能够实现您想要的功能的选项。

- Lucas

---

不幸的是，这个链接与Safari浏览器中的网页无关。 - Brad