Color of the audio player

Saola Animate Support Questions
1

Hi,
Is it possible to change the color of the Audio Player?

2

As far as I’m aware, not consistently across browsers. There is a webkit css selector that works on Chrome:

audio::-webkit-media-controls-panel{
background-color:blue !important;
}

But if you want it on all browsers, I believe you have to build your own custom player.

3

Hi mackavi,

1.Thanks for the input will give it a try. I am now wondering if the “HTML” widget could be used and input the code of a free html audio player into the widget.

  1. Also, since we can edit the html of the Saola Animate Document, would it be possible to insert the code of a free audio html or java player straight into the document?
4

Hi Locky,

A custom media player usually includes both JavaScript and CSS. The common steps to use it with Saola Animate are as follows:

  1. Import the media player JavaScript and CSS to Resources pane: https://atomisystems.com/html5-animation/using-external-javascript-css-html/
  2. If the player allows changing styles via CSS, you can edit its CSS file in step 1, or add your own CSS file to override some player styles.
  3. Add your own Run JavaScript action to initialize/create the player in Scene Activate event or Document Ready event. Where and how to add this script depends on that specific player library.
    You may need to assign a class name for your audio elements or use the following Saola Animate APIs in this step:
doc.getElement('audio element name').dom        // containing tag of the audio element
doc.getElement('audio element name').mediaDom   // the audio tag

Regards

5

Hi ToanLS,

  1. Thanks for the reply, I will give it a try and see how that works. I am not the smartest at doing these things, do you by chance have an example Saola Package example showing this?

  2. Yesterday tried this ----> I downloaded a free html5 player from wimpyplayer.com and uploaded the html player file and the folder it came with to the root folder of my website. Then I put an html widget on the page of my Saola Animate project and entered the url of the Wimpy html player page, and it worked like a charm! And being a widget, I can move to any position.

  3. I am curious though, if doing this the way you are describing, would have benefits that I can’t see because of my lack of experience? (Maybe a widget is not the best way to go).

6

Hi Locky,

You can see the Saola package sample that uses Green Audio Player here: custom audio player.saolapack (40.1 KB)
The player is initialized in onSceneActivated function. If you use another player, you need to see its manual or examples to update the script.

Using a custom player this way allows you to change other properties of the audio element directly from the UI, e.g. element size and position, audio resource, play/pause audio using built-in event-actions…

Regards

7

Hi ToanLS,

Thanks for the saolapack example, will take a look tonight can’t wait to try it!