CODEWITHSUNDEEP
htmlioscssipadaudio
Murphy1976
Murphy1976

Reputation: 1475

iOS HTML5 Audio Controls are NOT showing up

I am doing some audio support testing for my company's audio player, and am displaying a series of HTML5 Audio players to see which of our available formats are supported through a simple HTML5 Audio Player. The format here is not in question, just an explanation of what I'm doing.

The players display as they should on Windows Chrome, Firefox and IE11, on Mac Chrome, Firefox and Safari, on Android Internet, Chrome and Firefox... but when it comes to iPad and iPhone, this is where the Twilight Zone episode begins.

All that is visible in each Audio element, is the PLAY button, and the AirPlay control (if available). I have looked all over the web, and everyone says that if you make the elements wide enough, the time scrub and volume should just show up. I have the players stretching the entire width of the page, and still nothing.

Here is my HTML and 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;
}

Again, I am asking WHY can't I get the controls to fully show up on iPad and iPhone. This is not an audio format support question.

Here's a screenshot of WHAT my iPad is showing; enter image description here

Upvotes: 7

Views: 3612

Answers (2)

user2109834
user2109834

Reputation: 21

I had a similar issue and the problem seems to only occur if the audio player is not wide enough. Try a higher width (our flipping your phone in landscape) to determine if its a width issue or a controls boolean issue. Unfortunately I wasn't able to find a way to force the controls and ended up having to make the audio player wider.

Upvotes: 0

user7070724
user7070724

Reputation:

It seems like controls are showing up, just not the same controls as used in HTML5 on a computer. You can see the play/pause button just not the current location slider.

Upvotes: 1

Related Questions