How to add the code snippets into VSD...

User 2172356 Photo


Registered User
8 posts

I'm trying to add a mp3 player to VSD using the "Amazing Audio Player" application. I'm not sure where to add the code snippets as described into the VSD object properties box. Can someone show me the correct placement of specified code text elements found on this link?

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

I tried copying the whole thing into the "body" dialog box but that didn't work, so I must assume the code needs to be split up between the "body" and "Header" dialog boxes. I'm not sure what goes where in this instance.

Thanks for the help
User 187934 Photo


Senior Advisor
20,181 posts

Can you share a link to your page?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 271657 Photo


Ambassador
3,816 posts

In VSD, go to Edit and look for Edit Head – copy the code snippet that goes before the </head> tag and paste it there.
Then, under Edit, find Add Folders/Files and use that to add the 2 audio folders and the audio.html file to your site.
Click on the page where you want it to appear, then open the Add HTML tool and paste your body code snippet into the body section.
That should do it.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2172356 Photo


Registered User
8 posts

Hi Eric,
I'm currently using a different mp3 app that is flash based and I want to move away from this for better compatibility with modern browsers. I don't like HTML5's basic player so I decided to try using Amazing Audio Player which gives me more freedom to tailor the controls and size.

joethevopro.com

User 2172356 Photo


Registered User
8 posts

Thanks Paintbrush,
I tried implementing your instructions but it doesn't appear to work. I uploaded the Amazing Audio Player folders and files where they reside in the web site root directory. When I preview the webpage from VSD all that is shown is "html5 mp3 player" hyperlink where the player should be.

For the grins. I tried inserting the player as an iframe following Amazing Audio Player instructions. I placed this iframe code into the html body box using the "insert html" dialog ...

<iframe src="http://www.joethevopro.com/playerfolder/audioplayer.html" width="242" height="50" border="0" scrolling="no" frameBorder="0"></iframe>


and the player showed up (albeit not properly centered) but would not play the mp3 file. I can't believe I'm having such difficulty placing a simple mp3 player into a web page.

Does anyone on have a better recommendation on how to do this as simple as possible? I'm not a web designer nor do I know HTML (C, C++, C# no problem). I just need a simple solution so I can launch this new business venture and begin to market this web page.

thx

User 2147626 Photo


Ambassador
2,958 posts

Hey Joe.

That Amazing Audio works really well in VSD. Take a look at this page. http://gunsmoke.me/h/amazing

Just Right-Click and select View Page Source to see the simple code for the page. The sections are marked in the HEAD and BODY where the Amazing Audio is inserted.

Let me know if you still need help.

Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com
User 2172356 Photo


Registered User
8 posts

Thanks everyone for all your help. I finally got it sorted. Gunsmoke, your "live" example was perfect. Nothing like seeing a real functioning page and comparing it to my page when inspecting the source elements. This allowed me to see that I indeed had done everything right and could look elsewhere for the troubles.

The issue was with my browser (SRware Iron) and trying to test the website using the VSD preview option.

As it turns out a minor problem was with SRware Iron failing to "preload" the mp3 file so it can be listened to making the area where the player is viewed default to the AAP url. This also happened in IE 11 and Safari.

However the primary culprit was VSD will not allowing you to preview the web page locally even if the AAP files are loaded to the host server. It was only after I actually published the "index" page where the player is located did everything work correctly. It seems the host file HTML location references are not carried through in VSD preview mode.

Now that I have everything working I can finish modifying my page and get down to business. When time allows I'll try rebuilding it using RSD.

User 2147626 Photo


Ambassador
2,958 posts

Glad it's working. Let us know if you need anything else. :cool:
Graphics for the web, email, blogs and more!
-------------------------------------
https://sadduck.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.