Custom Audio Skin

Thanks I was hoping there was a different answer ;-)

Now I'll need a pause button, a play button, an audio object, some actions to connect it all up, and if I ever unintentionally replace the audio object it'll break.

If you just need a play / pause button, best would be to not use an audio player at all, choose Display "None", and use a normal button object to play / pause the invisible audio. This will solve the issue from your other topic as well.

Tim

If you used a "Toggle Play / Pause" action you'd only need one button, so it would be the same as using a "Custom image" for the player + a MouseOver effect on the image. Of course the connection will break if you remove the target audio object. It won't break if you just change the audio file in the audio object.

Easy. Add an External HTML Object set to META TAGS to the title level. Enter the following content:

undefined
.mejs-container { width: 46px !important;}
.mejs-controls undefined

It hides all the element except the play/pause button. The 46px is the width of the play/pause button. It might be a bit different with a different skin.

Sample title attached (Lectora 16.1)

Mozilla Developers Network is great for references. For example, it says, quote,

Elements that can be used inside a undefined

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head

The actual W3C website confirms this for HTML4.01 (https://www.w3.org/TR/html4/interact/scripts.html) and HTML5 (https://www.w3.org/TR/html5/scripting-1.html#the-script-element), quote,

4.11.1 The script element

Categories:

Metadata content.

Flow content.

Phrasing content.

Script-supporting element.

Contexts in which this element can be used:

Where metadata content is expected.

Where phrasing content is expected.

Where script-supporting elements are expected.

So just as Trivantis inserts tons of JS inside SCRIPT tags into the HEAD elements, I insert my SCRIPT tags inside the HEAD element and the ONLY way to do that using Lectora is to set an Ext HTML Object to META Tags.

Here are a few websites that do the same and that you might or might not view as developed by professionals:

http://google.com

http://facebook.com

http://cnn.com

SCRIPT tags should be wrapped inside HEAD or inside BODY tag. It definitely makes sense to put them where you propose (before closing BODY tag) for many reasons. But that is not mandatory and it is not the only way. Doing what Lectora, Google, FB and CNN do is entirely valid and according to the W3C standard as described on MDN and W3C.org.

P.S. I am not re-engaging into the META / SCRIPT discussion unless we are face to face and holding beers :D

A simple enough change. I just added the name of the skin I'm going to use for the audio to the css. For example, if I was using "anoto":

undefined

.mejs-container.mejs-anoto { width: 46px !important;}

.mejs-anoto .mejs-controls undefined

Thanks for your help.

Agreed, I owe you at least one. 

Dear Darrel, in this example nobody is loading any JavaScript. This resource (http://w3schools.com) provides good lessons on HTML basics, including the difference between CSS and JavaScript. They serve completely different purposes and it is easy to tell which is which.

You are absolutely, one hundred percent correct saying "Meta tags are for meta tags". Lectora puts anything listed in the Ext HTML set to META between the opening HTML and opening BODY tags. The W3C - the organisation that develops and maintains the HTML standard - lists all tags that can be placed there: https://www.w3.org/TR/html5/document-metadata.html

As you can see from that link, these tags include HEAD, TITLE, BASE, LINK, META, STYLE. As you can easily see if you read my code sample, I am using STYLE tag. Which is one hundred percent in line with the W3C standard.

Hope this helps.

Well done, I never thought to edit the skin's CSS.

I guess though it will affect all skins in the title including that used by video?

Good solution, however, loading JavaScript like this is not good practice. This is especially true when the JS is effecting CSS (or anything else getting loaded after it). The better practice is to load your scripts in a bottom of file scripting HTML Extension as this will place the scripts just before the closing body tag. It doesn't even take more time or keystrokes. Meta tags are for meta data, not JavaScript.

Whoops. You're 100% correct, Sergey. I am so used to your putting scripts in meta tags that I didn't really look at your code other than to notice you had a couple of declarations that looked like they'd work. My apologies, I should be flogged. To my point, however, look more closely at where Lectora puts the information you stick in the HTML Extension Meta tag. While saying it is in between the opening HTML and BODY tag is right, it is like locating the Grand Canyon between New York and Los Angeles. Lectora sticks the info you add right where's you'd expect it to, in the meta tag section of the head above both the CSS and JavaScript. This is sort of important and why I am against using it for scripts. I view your code and solutions as among the best on the forum, it's where you sometimes place them that is troublesome to me. Maybe it works in Lectora but you'd never do that building a website. So we are on the same page then, right? No more JavaScript in meta tags. Oh, and thanks for the W3cschools link but I prefer Mozilla Developers Network when I need a reference, it's a little more informative. 

undefined