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＆amp; Android devices ）。
但是控制者不会出现与 Safari （在PC，iPad和iPad mini 上测试最新版本）。
音频播放器具有灰色背景，仅播放/暂停＆＃34;功能即可。
以下是描述我的问题的屏幕截图：

感谢。

Answer 1

我有完全相同的问题。

我的解决方案：我添加了audiofile源的完整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页面是否为第一行。

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

已知Safari不会在没有正确的DOCTYPE的情况下呈现HTML-5内容。

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

Answer 4

在Andriod上运行后，对于该简单答案的搜索时间过长，我终于在iOS上进行了测试，如果您使用的是离子型

import {normalizeURL} from 'ionic-angular';

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

希望这会有所帮助。

Answer 5

此处与放大器音频相同

此CSS（实际上是无礼）解决了问题

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

Safari和iPad上的Html5（音频） iOS版

Html5音频标签：

5 个答案: