Safari 和 iOS 上的 Html5（音频）答案

【问题标题】：Html5 (audio) on Safari & iOSSafari 和 iOS 上的 Html5（音频）
【发布时间】：2014-07-22 07:59:40
【问题描述】：

我正在开发一个 Web 应用程序，但我遇到了一个与 Apple 设备和 PC 上的 Safari 的兼容性问题。

Html5 音频标签：

<audio controls>
<source src="/audio/en/file.mp3" type="audio/mpeg">
<source src="/audio/en/file.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>

我只想播放带有基本控件的音频文件。
之前的代码在 Chrome、Opera、Firefox（Windows 和 Android 设备）上完美运行。
但是控制器没有出现，Safari（在 PC、iPad 和 iPad mini 上使用最新版本测试）。
音频播放器的背景为灰色，只有“播放/暂停”功能。
这是描述我的问题的屏幕截图：

谢谢。

【问题讨论】：

我认为您需要 WAV、PCM 或 AAC 格式的 safari 音频。根据this
你也应该看看this。类似的问题。
播放文件没有问题，你认为格式与“控件显示”相关联吗？
我没有 JavaScript 问题。其实我只是想用 Html5 标签和它们的默认功能。
我对这个标签不是很熟悉，但我只是猜测。可能是其他链接会帮助你。

标签： ios html audio safari compatibility

【解决方案1】：

我遇到了完全相同的问题。

我的解决方案：我添加了音频文件源的完整 URL。不知道为什么，但它有所作为。这是我的完整代码。 CSS 修改只是为了隐藏下载按钮。但是当我把它拿出来时，我看不到时间线。很奇怪，但这段代码对我有用。

<!DOCTYPE html>
<html>
<head>
    <title>html5 audio player on iPhone</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
audio::-internal-media-controls-download-button {
    display:none;
}
audio::-webkit-media-controls-enclosure {
    overflow:hidden;
}
audio::-webkit-media-controls-panel {
    width: calc(100% + 33px);
}  
</style>
</head>
<body>
<audio controls preload="auto" style="width:100%;">
    <source src="https://example.com/audio/audiofile.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio><br />
</body>
</html>

【讨论】：

>我的解决方案：我添加了音频文件源的完整 URL。不知道为什么，但它有所作为。你是英雄。我现在也将停止向虚空尖叫。兄弟，你不知道今天和昨天花费了多少开发人员的时间来试图弄清这个问题。哇。哇。无论如何，在众多潜在解决方案中的这个小小的评论挽救了一天。你是英雄。请 PM 你的地址以获得奖牌，我将在邮件中签名并发送。

【解决方案2】：

看来实际的“修复”对我来说真的很简单——我所需要的只是确保<audio> 标签有足够的宽度来显示所有控件。请看下面的截图

更高版本

<audio controls preload="auto" style="width:100%;" >
    <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg">
</audio>

底层版本

<audio controls preload="auto">
        <source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg">
</audio>

【讨论】：

我想要一个关于downvote 的解释 - 如果解决方案不起作用，其他人 [和我自己] 知道使用了什么代码但仍然不起作用会很有用。
这解决了我的问题。它现在显示所有控件，例如音量和播放。然而，有了这个集合，它在移动设备上的显示比以前少了。它将它裁剪为一个播放按钮，根本没有任何栏。此外，垂直弹出的音量滑块往往会在表格顶部等处被夹住。还没有找到解决方法。

【解决方案3】：

这听起来可能很奇怪，但请检查您的 HTML 页面的第一行是否有 a。

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Page Title</title>
... and the rest of your page's code follows...

众所周知，如果没有正确的 DOCTYPE，Safari 将不会呈现 HTML-5 内容。

【讨论】：

我下周去看看。谢谢。

【解决方案4】：

这个简单的答案在Andriod上工作后搜索了太久，我终于在iOS上进行了测试，如果你使用的是离子，这可以工作

import {normalizeURL} from 'ionic-angular';

MediaSource = document.createElement("audio");
MediaSource.src = normalizeURL(cordova.file.dataDirectory + file.fullPath);

希望这会有所帮助。

【讨论】：

【解决方案5】：

此处与 amp-audio 相同

这个 css（实际上是 sass）解决了这个问题

amp-audio {
    [class*="amphtml-fill-content"] {
        width: 100%;
    }
}

【讨论】：