私の会社のオーディオプレーヤーのオーディオサポートテストを実施しています。HTML5オーディオプレーヤーを使用して、サポートされているフォーマットを確認する一連のHTML5オーディオプレーヤーを表示しています。ここのフォーマットは問題ではなく、私がやっていることの説明だけです。iOS HTML5オーディオコントロールが表示されない
Android Chrome、Firefox、Safari、Androidインターネット、Chrome、FirefoxでWindowsのChrome、Firefox、IE11のプレイヤーが表示されますが、iPadとiPhoneの場合、これはTwilightゾーンのエピソードが始まります。
各Audioエレメントに表示されるのは、PLAYボタンとAirPlayコントロール(使用可能な場合)です。私はウェブ全体を見てきました、そして、あなたが要素を十分に広げると、タイムスクラブと音量はちょうど現れなければならないと誰もが言います。私はプレーヤーがページの全幅を伸ばしているが、まだ何も持っていない。ここで
が私のHTMLとCSS
HTMLである:私は完全にコントロールを取得することはできませんなぜ
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AUDIO TESTS</title>
</head>
<body>
<div class="player">
<h3>AIFF 1</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="Track01.aiff" type="audio/aiff">
</audio>
</div>
<div class="player">
<h3>AIFF 2</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="Track29.aiff" type="audio/aiff">
</audio>
</div>
<div class="player">
<h3>M4A 1</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="35027823.m4a" type="audio/mp4">
</audio>
</div>
<div class="player">
<h3>M4A 2</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="DefyingGravitywinds.m4a" type="audio/mp4">
</audio>
</div>
<div class="player">
<h3>MP3</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="35027822.mp3" type="audio/mpeg">
</audio>
</div>
<div class="player">
<h3>WAV 1</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="Aboveallhigh.wav" type="audio/wav">
</audio>
</div>
<div class="player">
<h3>WAV 2</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="holygourndhigh.wav" type="audio/wav">
</audio>
</div>
<div class="player">
<h3>WMA</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="A8526.wma">
</audio>
</div>
</body>
</html>
CSS
body {
wwidth: 100%;
height: 100%;
background: #ff0000;
font-size: 100%;
font-family: Arial, sans-serif;
color: #333;
margin: 10px 0;
text-align: center;
}
.player{
width: 75%;
height: auto;
display: block;
margin: 5px auto;
border-radius: 3px;
background-color: rgba(0,100,0, 1);
border: 1px solid #333;
padding: 10px;
}
.player:hover {
background-color: rgba(0,100,0, 0.4);
}
.player h3 {
padding: 0;
margin: 0 0 10px;
}
audio {
width: 100%;
height: 100px;
display: block;
margin: 0;
}
繰り返しますが、私が求めていますiPadとiPhoneに表示されます。これはオーディオ形式のサポートに関する質問ではありません。
ここに私のiPadが表示しているもののスクリーンショットがあります。
解決策が見つかりましたか?私は同じ問題を抱えています。 –