How to insert an HTML5 audio player to your webpage using iframe

Iframe is a convenient way to insert the HTML5 audio player to your webpage, and it's supported in all major web browsers, which include mobile, tablets and desktop computers.

This tutorial will guide you how to insert an HTML5 audio player created with Amazing Audio Player to your web page with iframe.

Step 1 - Create an HTML5 audio player in Amazing Audio Player

Amazing Audio Player is an easy-to-use desktop application which enables you to create HTML5 audio player which works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer 7/8/9/10/11.

In the application, you can add your mp3 files, select a skin, then click Publish button to create your HTML5 audio player.

HTML5 Audio Player

Step 2 - Upload all of the generated files to your web server

In this step, you need to upload all of the generated files to your web server, which includes the HTML file and two folder audios and audioplayerengine.

HTML5 Audio Player

Step 3 - Insert the player to your webpage using iframe

In this step, you need to insert the player to your webpage using iframe codes, for example:

<iframe src="http://www.yourwbsite.com/playerfolder/audioplayer.html" width="400" height="300" border="0" scrolling="no" frameBorder="0"></iframe>

In the above codes:

  • You need to change the src value to the real URL address of your audioplayer.html file
  • You need to change the value of width and height to the real value of your player

An example is as following: