asked on

Using an audio control in an iframe

I have a web page that displays and plays my voice messages stored elsewhere on the web. I am having a problem with the Chrome built in audio control running in an iframe. Here is what it looks like:

Here is the code:

<a href='https://api.twilio.com" . $recording->uri . "' target='newframe'>Play</a>
....
<iframe name='newframe' frameborder='0' height='150' width='300'></iframe>

Open in new window

As you can see, there is a big black area above the audio control.

I can wrap the iframe in a div to round the corners:

Code:

<div style='display:inline-block;height:150px;overflow:hidden;border-radius:27px>
<iframe name='newframe' frameborder='0' height='150' width='300'></iframe>
</div>

Open in new window

But if I try to reduce the height of the iframe and div, the audio control just gets smaller and I loose the time slider"

Code:

<div style='display:inline-block;height:54px;overflow:hidden;border-radius:27px>
<iframe name='newframe' frameborder='0' height='54' width='300'></iframe>
</div>

Open in new window

I tried just reducing the height of the div or iframe without reducing the other but then the audio control is out of the frame.

Any idea of how to reduce the height of the iframe without changing the audio control?

I am thinking of using the HTML5 audio control instead (as in the sites below) but I am not sure how to load and then play a new message from the <a> link.
https://www.w3schools.com/tags/tag_audio.asp
https://amazingaudioplayer.com/html5-audio-player-api/playpause-audio-player-inside-an-iframe/

Thanks

NerdsOfTech

<div style='display:inline-block;height:54px;overflow:hidden;border-radius:27px>
<iframe name='newframe' frameborder='0' height='54' width='100%'></iframe>
</div>

Open in new window

thenelson

ASKER

NerdsOfTech,
The only change I saw was width='100%'. I copied your code to my app and got:

Shaun Vermaak

The Twilio API documentation shows that you can have links to audio files
https://www.twilio.com/docs/voice/twiml/play

Why use an IFrame?

<audio controls>
  <source src="https://api.twilio.com/cowbell.mp3" type="audio/ogg">
</audio>

Open in new window

thenelson

ASKER

Shaun,
>Why use an IFrame?
Because I am loading the audio source source on a click of a link:

<a href='https://api.twilio.com" . $recording->uri . "' target='newframe'>Play</a>

Open in new window

Currently I am working on the audio control in a php script where I pass the audio source through a url querry string:

<!DOCTYPE html>
<html>
<body>
<audio controls autoplay>
  <source src= <?php echo $_GET['url'] ?> type="audio/mpeg">
  <source src= <?php echo $_GET['url'] ?> type="audio/wav">
  Your browser does not support the audio tag.
</audio>
</body>
</html>

Open in new window

I got that php script working. (The html code I listed in the original question is actually in a php script - I stripped out the php code for simplicity): I am in the process of putting the php script with the audio control in the iframe and loading the audio source to it.

ASKER CERTIFIED SOLUTION

thenelson

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Shaun Vermaak

No need to use an IFrame to load it on a click of a link. There is a bunch of libraries that you can use without using an IFrame. Chances are that the IFrame will stop working because most sites block it.