Html Safari 和 iOS 上的 Html5（音频）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24881807/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html5 (audio) on Safari & iOS
提问by ccarrez
I am working on a web application and I have one compatibility problem with Apple devices & Safari on PCs.
我正在开发一个 Web 应用程序，但我在 PC 上与 Apple 设备和 Safari 存在一个兼容性问题。
Html5 audio tag:
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>
<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>
- I just want to play an audio file with basic controls.
- The previous code works perfectly on Chrome, Opera, Firefox (Windows & Android devices).
- But controlers do no appearwith Safari(tested with the latest version on PC, iPad & iPad mini).
- Audio player have a grey background with only "play/pause" function.
- Here is a screenshot that describes my problem :
- 我只想播放带有基本控件的音频文件。
- 之前的代码在 Chrome、Opera、Firefox（Windows 和 Android 设备）上完美运行。
- 但是控制器不会出现在Safari 中（在 PC、iPad 和 iPad mini 上用最新版本测试）。
- 音频播放器有灰色背景，只有“播放/暂停”功能。
- 这是描述我的问题的屏幕截图：
Thanks.
谢谢。
采纳答案by user7103188
I had exactly the same problem.
我遇到了完全相同的问题。
My solution: I added the full URL for the audiofile source. Don't know why but it makes a difference. Here's my full code. The CSS modifications are only to hide the download button. But when I take it out I don't see the timeline. Very strange but exactly this code works for me.
我的解决方案：我添加了音频文件源的完整 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>
回答by Jeffrey Skinner
Searched for too long for this simple answer after it was working on Andriod, and I finally tested on iOS, this works if you're using ionic
这个简单的答案在 Andriod 上工作后搜索了太长时间，我终于在 iOS 上进行了测试，如果您使用的是 ionic
import {normalizeURL} from 'ionic-angular';
MediaSource = document.createElement("audio");
MediaSource.src = normalizeURL(cordova.file.dataDirectory + file.fullPath);
Hope this helps.
希望这可以帮助。
回答by bob
It may sound odd, but check that your HTML page has a as the first line.
听起来可能很奇怪，但请检查您的 HTML 页面的第一行是否有 a。
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>My Page Title</title>
... and the rest of your page's code follows...
Safari is known to not render HTML-5 content without the proper DOCTYPE.
众所周知，如果没有正确的 DOCTYPE，Safari 不会呈现 HTML-5 内容。
More Info: http://www.wimpyplayer.com/docs/common/doctype.html
回答by morgan_il
It seems the actual "fix" was really simple for me - all I needed is to make sure <audio>tag has enough width to show all the controls.
See screenshot below
看起来实际的“修复”对我来说真的很简单——我需要的只是确保<audio>标签有足够的宽度来显示所有控件。看下面的截图
Upper version
上版
<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>
Bottom Version
底部版本
<audio controls preload="auto">
<source src="https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3" type="audio/mpeg">
</audio>
