Adding a 3rd party audio player

d-p wrote on 10/29/2020, 12:07 PM

I would like to add this audio player to my site but cant seem to figure out how to. Here is the link to the player.

https://amazingaudioplayer.com/

I looked at the amazing audio page for install instructions and it does not match with Xara at all. Please advise as to how to insert this specific player into web designer. Greatly appreciated!

Comments

johnebaker wrote on 10/29/2020, 1:35 PM

@d-p

Hi

I would suggest you use this method, it would give you the least hassle and enable it to be player playlist to be updated without the need for redoing the whole web page, though you will have to upload the player html separately.

In Web Designer either

Add a Shape where the player is to appear and under Web Properties, Placeholder tab add iFrame code containing the link with a link to the player generated HTML.

or

Use the Embed a Website widget if it is available to you in the Online Gallery.

HTH

John EB

VPX 16, Movie Studio 2025, and earlier versions 2015 and 2016, Music Maker Premium 2024.

PC - running Windows 11 23H2 Professional on Intel i7-8700K 3.2 GHz, 16GB RAM, RTX 2060 6GB 192-bit GDDR6, 1 x 1Tb Sabrent NVME SSD (OS and programs), 2 x 4TB (Data) internal HDD + 1TB internal SSD (Work disc), + 6 ext backup HDDs.

Laptop - Lenovo Legion 5i Phantom - running Windows 11 23H2 on Intel Core i7-10750H, 16GB DDR4-SDRAM, 512GB SSD, 43.9 cm screen Full HD 1920 x 1080, Intel UHD 630 iGPU and NVIDIA GeForce RTX 2060 (6GB GDDR6)

Sony FDR-AX53e Video camera, DJI Osmo Action 3 and Sony HDR-AS30V Sports cams.

d-p wrote on 10/29/2020, 1:53 PM

Thanks John. Seems there are a few more steps that are not letting just the placeholder be the player. Here is the link to the instructions and it seems i need to add 2 bits of code to make this works. Not sure how to do it.

https://amazingaudioplayer.com/how-to-add-html5-audio-player-to-your-webpage/

johnebaker wrote on 10/30/2020, 12:36 PM

@d-p

Hi

That linked to page is not for putting the player in an iFrame which would be the preferred option for the reasons I gave, the method you linked to is more difficult to maintain.

Full instructions for using an iFrame are in the page I linked to, I have tested this and it is easier to setup and maintain.

John EB

 

VPX 16, Movie Studio 2025, and earlier versions 2015 and 2016, Music Maker Premium 2024.

PC - running Windows 11 23H2 Professional on Intel i7-8700K 3.2 GHz, 16GB RAM, RTX 2060 6GB 192-bit GDDR6, 1 x 1Tb Sabrent NVME SSD (OS and programs), 2 x 4TB (Data) internal HDD + 1TB internal SSD (Work disc), + 6 ext backup HDDs.

Laptop - Lenovo Legion 5i Phantom - running Windows 11 23H2 on Intel Core i7-10750H, 16GB DDR4-SDRAM, 512GB SSD, 43.9 cm screen Full HD 1920 x 1080, Intel UHD 630 iGPU and NVIDIA GeForce RTX 2060 (6GB GDDR6)

Sony FDR-AX53e Video camera, DJI Osmo Action 3 and Sony HDR-AS30V Sports cams.

browj2 wrote on 10/31/2020, 10:17 AM

@d-p @johnebaker

I also struggled with this.

I used the iFrame method. The trick was to publish the page, if not already done, then upload to the website (I used Xara Online) the audioplayer.html and the 2 folders created when making the widget from Amazing.

Then I went back and put in the correct address in the code for the body of the placeholder:

<iframe src="http://jcbrown.xara.hosting/Test Amazing/audioplayer.html" 
width="400" height="400" border="0" frameborder="0"  scrolling="no"></iframe>

Then it worked.

John, did you do the same? If not, what was the process?

I couldn't get the HTML5 to work. I'll ask on the TalkGraphics forum. @d-p you should join.

John C.B.

VideoPro X(16); Movie Studio 2024 Platinum; MM2025 Premium Edition; Samplitude Pro X8 Suite; see About me for more.

Desktop System - Windows 10 Pro 22H2; MB ROG STRIX B560-A Gaming WiFi; Graphics Card Zotac Gaming NVIDIA GeForce RTX-3060, PS; Power supply EVGA 750W; Intel Core i7-10700K @ 3.80GHz (UHD Graphics 630); RAM 32 GB; OS on Kingston SSD 1TB; secondary WD 2TB; others 1.5TB, 3TB, 500GB, 4TB, 5TB, 6TB, 8TB; three monitors - HP 25" main, LG 4K 27" second, HP 27" third; Casio WK-225 piano keyboard; M-Audio M-Track USB mixer.

Notebook - Microsoft Surface Pro 4, i5-6300U, 8 GB RAM, 256 SSD, W10 Pro 20H2.

YouTube Channel: @JCBrownVideos

browj2 wrote on 10/31/2020, 10:34 AM

@d-p @johnebaker

Ok, I got the HTML5 to work. The trick was to get the audioplayer.html and its folders into the website, then publish.

For the header part, I put the pertinent code in the (right click on the page, Web page properties), HTML Code (head) for the Web properties, and the body in the body part of the Placeholder. Publish, it worked.

Previewing does not work and a link to the Amazing site is given instead of the player.

I won't ask the question on the TG forum.

John CB

Last changed by browj2 on 10/31/2020, 10:36 AM, changed a total of 2 times.

John C.B.

VideoPro X(16); Movie Studio 2024 Platinum; MM2025 Premium Edition; Samplitude Pro X8 Suite; see About me for more.

Desktop System - Windows 10 Pro 22H2; MB ROG STRIX B560-A Gaming WiFi; Graphics Card Zotac Gaming NVIDIA GeForce RTX-3060, PS; Power supply EVGA 750W; Intel Core i7-10700K @ 3.80GHz (UHD Graphics 630); RAM 32 GB; OS on Kingston SSD 1TB; secondary WD 2TB; others 1.5TB, 3TB, 500GB, 4TB, 5TB, 6TB, 8TB; three monitors - HP 25" main, LG 4K 27" second, HP 27" third; Casio WK-225 piano keyboard; M-Audio M-Track USB mixer.

Notebook - Microsoft Surface Pro 4, i5-6300U, 8 GB RAM, 256 SSD, W10 Pro 20H2.

YouTube Channel: @JCBrownVideos

johnebaker wrote on 10/31/2020, 3:27 PM

@browj2

Hi John

. . . . John, did you do the same? If not, what was the process? . . . .

I used a similar method to you, the main difference was I can test locally on my PC as I have Microsoft Internet Information Services, which comes with most versions of Windows, installed.

John EB

VPX 16, Movie Studio 2025, and earlier versions 2015 and 2016, Music Maker Premium 2024.

PC - running Windows 11 23H2 Professional on Intel i7-8700K 3.2 GHz, 16GB RAM, RTX 2060 6GB 192-bit GDDR6, 1 x 1Tb Sabrent NVME SSD (OS and programs), 2 x 4TB (Data) internal HDD + 1TB internal SSD (Work disc), + 6 ext backup HDDs.

Laptop - Lenovo Legion 5i Phantom - running Windows 11 23H2 on Intel Core i7-10750H, 16GB DDR4-SDRAM, 512GB SSD, 43.9 cm screen Full HD 1920 x 1080, Intel UHD 630 iGPU and NVIDIA GeForce RTX 2060 (6GB GDDR6)

Sony FDR-AX53e Video camera, DJI Osmo Action 3 and Sony HDR-AS30V Sports cams.