Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
JMM
Experienced
Topic Author
Posts: 154
Joined: 02 Aug 2021, 11:18

Issues getting a javascript script to work

05 Aug 2021, 10:01

Hello, folks.

I have an HTML5 audio script that  am trying to run on my X3 site, but am having issues trying to get it to work, which I am hoping that someone with more experience can point out where my problem is, or most-likely problems.

I have uploaded the MP3 & OGG files to my site, and I am able to run the script fine locally from my Windoze PC, while pointing to the audio files on my site.

The script consists of a single HTML file, and a folder who's content I have uploaded to my custom\files\javascript folder on my X3 site:
amazingaudioplayer.js
amazingaudioplayer.swf
initaudioplayer-1.css
initaudioplayer-1.js
jquery.js
loop-24-24-0.png
loop-24-24-2.png
playpause-24-24-0.png
playpause-24-24-1.png
prevnext-24-24-0.png
prevnext-24-24-1.png
tracklistarrow-48-16-1.png
volume-24-24-0.png
volume-24-24-2.png
The code in that single HTML file is:
Code
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>Amazing HTML5 Audio Player, powered by http://amazingaudioplayer.com</title>
    
    <!-- Insert to your webpage before the </head> -->
    <script src="jquery.js"></script>
    <script src="amazingaudioplayer.js"></script>
    <link rel="stylesheet" type="text/css" href="initaudioplayer-1.css">
    <script src="initaudioplayer-1.js"></script>
    <!-- End of head section HTML codes -->
    
</head>
<body>
<div style="margin:12px auto;">
    
    <!-- Insert to your webpage where you want to display the audio player -->
    <div id="amazingaudioplayer-1" style="display:block;position:relative;width:100%;max-width:300px;height:auto;margin:0px auto 0px;">
        <ul class="amazingaudioplayer-audios" style="display:none;">
            <li data-artist="" data-title="Becky&apos;s Demolition Call" data-album="" data-info="" data-image="" data-duration="188">
                <div class="amazingaudioplayer-source" data-src="https://www.gallerywings.life/content/galleries/galleries_jmm/audio/humour/assorted/BeckysDemolitionCall.ogg" data-type="audio/ogg" ></div>
                <div class="amazingaudioplayer-source" data-src="https://www.gallerywings.life/content/galleries/galleries_jmm/audio/humour/assorted/BeckysDemolitionCall.mp3" data-type="audio/mpeg" ></div>
            </li>
            <li data-artist="" data-title="JFK Ground Controller frustration" data-album="" data-info="" data-image="" data-duration="650">
                <div class="amazingaudioplayer-source" data-src="https://www.gallerywings.life/content/galleries/galleries_jmm/audio/humour/assorted/JFKGround.ogg" data-type="audio/ogg" ></div>
                <div class="amazingaudioplayer-source" data-src="https://www.gallerywings.life/content/galleries/galleries_jmm/audio/humour/assorted/JFKGround.mp3" data-type="audio/mpeg" ></div>
            </li>
        </ul>
        <div class="amazingaudioplayer-engine"><a href="http://amazingaudioplayer.com" title="html5 music player">audio player for website</a></div>
    </div>
    <!-- End of body section HTML codes -->

</div>
</body>
</html>
On my site, I've pasted the above code into the Content section for that page, but it seems that my X3 installation does not know what to do with the <script> & <link> items, and most-likely some other things too.  You can see what happens when that page is called here:

https://www.gallerywings.life/galleries/galleries_jmm/audio/humour/audio_test/

I've only been using X3 for a couple of weeks, but have had a decade running other (PHP) sites, so I am hoping that someone with X3 experience can point me in the right direction with this issue, with possibly some hand-holding to guide me through the steps needed to resolve the problem.

I thank you in advance & have yourselves a splendid week.

Regards & be safe,

John
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Issues getting a javascript script to work

05 Aug 2021, 11:48

Hi! I am looking at the link you sent, and the HTML there is a bit messed up. As stated in the comments in the script example you posted, you need to post some parts in different locations, and ONLY the sections which are commented. The rest of the code in that example is an entire website, and you can't just paste the entire website into X3, including <body> and all.

I also see some problems. This script uses jQuery, which is already loaded into X3, and you can't just override it with your own jQuery version. If all goes well, this script you are using is compatible with latest version of jQuery, which is already included in X3.

Before you proceed further with this slightly clumsy script, do you really need a complex javascript plugin to play audio on your website? All modern browsers support audio player with just a simple tag <audio ... src="...">.

Next step, if you want to set this up:
  • Add the scripts and CSS section into X3 settings > custom > custom <head> . Exclude jQuery. Also, what about those SRC paths to script sources? They need to be modified to point to the correct locations where those files are stored. Pasting directly from that example won't work, as those links are page-relative.
  • Add the section with <div id="amazingaudioplayer-1"... into your X3 page's "content" section.
Since X3 is an ajax app, it's likely you would need to add some additional code to trigger the scripts when navigating to the page. It's certainly not easy to implement all this unless you have some experience with html and javascript.
 
User avatar
JMM
Experienced
Topic Author
Posts: 154
Joined: 02 Aug 2021, 11:18

Re: Issues getting a javascript script to work

06 Aug 2021, 11:16

Hi, Karl, thank you for looking into my issues for me.
Before you proceed further with this slightly clumsy script, do you really need a complex javascript plugin to play audio on your website? All modern browsers support audio player with just a simple tag <audio ... src="...">.
I tried the <audio> option, and that works great, except (at least for Chrome-based browsers), the height of the players are gigantic, taking up much-wasted space, and which allow me at best only 3 or 4 players (tracks) displayed on a (slightly larger than 1080p) page.  This script that I wish to use is very compact, and with it I can get an estimated 20-30 tracks displayed on that same screensize.

Although I have not actually resolved the issue of running that script from my X3 installation, I have come up with a work-around which suits my needs quite well & that I am very happy with.  I installed that script on one of my PHP sites, and it works perfectly, so I just created links from my X3 to my PHP site.  Click on any image on the this link, to see how the above work-around looks:

My work-around solution

I am sorry to have made you waste your time looking into why this script was not working on X3, and I appreciate your effort & time-spent.

Have yourself a splendid weekend, and be safe.

Regards,
John
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Issues getting a javascript script to work

07 Aug 2021, 03:16

JMM wrote:I tried the <audio> option, and that works great, except (at least for Chrome-based browsers), the height of the players are gigantic, taking up much-wasted space, and which allow me at best only 3 or 4 players (tracks) displayed on a (slightly larger than 1080p) page.
The player should look like this:
https://www.w3schools.com/html/tryit.as ... o_autoplay

If your audio does not look like this, sounds like there is some CSS that is affecting the width, but that would be easy to fix. However, if you want to use a PLAYLIST (like in your workaround), then yes it would be more compact because you have a single player from where you can run multiple tracks.
JMM wrote:Although I have not actually resolved the issue of running that script from my X3 installation, I have come up with a work-around which suits my needs quite well & that I am very happy with.  I installed that script on one of my PHP sites, and it works perfectly, so I just created links from my X3 to my PHP site.  Click on any image on the this link, to see how the above work-around looks:

My work-around solution
Yup, not bad at all. It would be possible to try to imeplement the plugin into the page, but I would need to spend some time looking into it. In such case, I would have preferred a different plugin myself, for example MediaElement / playlist demo, which doesn't require jQuery and has minimal default styling.

For the sake of it, I could probably create a simple audioplayer-playlist in less than an hour, piggy-backing the native browser audio player. Let me know ...
 
User avatar
JMM
Experienced
Topic Author
Posts: 154
Joined: 02 Aug 2021, 11:18

Re: Issues getting a javascript script to work

07 Aug 2021, 05:52

Hello again, Karl.
For the sake of it, I could probably create a simple audioplayer-playlist in less than an hour, piggy-backing the native browser audio player. Let me know ...
Please do not spend any of your time on this, as I am extremely happy with my work-around method, but thanks for the offer.

Have yourself a splendid weekend, Sir, and be safe.

Regards,

John
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |