Monthly Archives: April 2014

HTML5 Audio Player for Joomla 3.2

Posted on by

Question:

I tried to add your amazing HTML5 audio player to my Joomla website exactly the way it is shown in your tutorial/documentation. But it does not work. It generates a blank white page as long as your module is active. I had to disable your module and after that my website run perfect again, but without your audio player of course.

Answer:

It looks like there is a jQuery conflict in your website.  You can try to use an iframe to embed the player to your website, it’s more easy compared to the module solution: https://amazingaudioplayer.com/how-to-insert-an-html5-audio-player-to-your-webpage-with-iframe/

How to change the color of the player progress bar and volume bar

Posted on by

Question:

I wonder how can I change the progress bar color and volume bar color of the audio player

Answer:

You need to change the CSS code.

In the application, Step 2 Skins dialog, CSS tab:

To change the progress bar color, change the value marked by red:

#amazingaudioplayer-AUDIOPLAYERID .amazingaudioplayer-progress-played {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background-color: #fcc500;
background-image: -ms-linear-gradient(top, #fede00 0%, #fcc500 100%);
background-image: -moz-linear-gradient(top, #fede00 0%, #fcc500 100%);
background-image: -o-linear-gradient(top, #fede00 0%, #fcc500 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fede00), color-stop(1, #fcc500));
background-image: -webkit-linear-gradient(top, #fede00 0%, #fcc500 100%);
background-image: linear-gradient(to bottom, #fede00 0%, #fcc500 100%);
}

To change the volume bar color, change the value marked by red:

#amazingaudioplayer-AUDIOPLAYERID .amazingaudioplayer-volume-bar-adjust-active {
background-color: #fcc500;
-webkit-box-shadow: inset 0 0 5px rgba( 255, 255, 255, 0.5 );
-moz-box-shadow: inset 0 0 5px rgba( 255, 255, 255, 0.5 );
box-shadow: inset 0 0 5px rgba( 255, 255, 255, 0.5 );
}