Safari 和 iOS 上的 Html5（音频）

Question

我正在开发一款 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上使用最新版本进行测试）。
音频播放器有灰色背景，只有“播放/暂停”功能。
这是描述我的问题的屏幕截图：

谢谢。

Answer 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>

Answer 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>

Answer 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 内容。

更多信息： http://www.wimpyplayer.com/docs/common/doctype.html

Answer 4

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

import {normalizeURL} from 'ionic-angular';

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

希望这有帮助。

Answer 5

与 amp-audio 相同

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

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

Answer 6

我知道这篇文章已经很老了 - 但遇到了这个问题，解决方案并没有解决我的问题，经过一些研究和实验发现，只需用扩展名“.wav”而不是原来的“.wav”重命名音频文件。 mp3”（当然还要确保同一文件在服务器上被重命名）。解决了IOS浏览器播放的问题。

探索之旅：我在其他地方读到了类似的问题（https://community.openai.com/t/issues-with-audio-files-from-ios-and-the-x-m4a-format/794701/12）并且本来打算将文件实际转换为 .wav 格式 - 但首先尝试了一个简单的重命名 - 并且成功了！

Safari 和 iOS 上的 Html5（音频）

问题描述投票：0回答：6

Html5 音频标签：

6个回答

最新问题

Safari 和 iOS 上的 Html5（音频）

问题描述 投票：0回答：6

Html5 音频标签：

6个回答

最新问题

问题描述投票：0回答：6