Using an audio control in an iframe

thenelson
thenelson used Ask the Experts™
on
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:audio control in iframeHere 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:audio control in iframe with round cornersCode:
<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"shorter iframeCode:
<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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
NerdsOfTechTechnology Scientist

Commented:
<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

NerdsOfTech,
The only change I saw was width='100%'. I copied your code to my app and got:iframe 100% width
Shaun VermaakSenior Consultant
Awarded 2017
Distinguished Expert 2018

Commented:
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

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

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.
It's working!
I changed the link to load the audio source to:
<a href='https://www.barnwellmd.com/secure/playaudio.php?url=https://api.twilio.com" . $recording->uri . "' target='newframe'>Play</a>

Open in new window

Thanks for your input!
Shaun VermaakSenior Consultant
Awarded 2017
Distinguished Expert 2018

Commented:
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.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial