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.
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.
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="https://www.yourwbsite.com/playerfolder/audioplayer.html" width="400" height="400" 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: