Issue with Audio tag in Jodit Editor

[seadhna]

Hi datahell,
how do you recommend making audio available in Elxis 5?
If I use the audio tag, each time I save the article, this code gets added outside the audio tag:

                <jodit-media data-jodit-temp="1" contenteditable="false" draggable="true" data-jodit_fake_wrapper="1" style="display: block; width: 300px; height: 54px;">
<audio controls="">
 <source src="https://www.example.org/example.mp3" type="audio/mpeg">
   Your browser does not support the audio tag.
</audio>
            </jodit-media>

Each time I save it gets added again; soon looking like this, and preventing CSS from working:

            <jodit-media data-jodit-temp="1" contenteditable="false" draggable="true" data-jodit_fake_wrapper="1" style="display: block; width: 300px; height: 54px;">
            <jodit-media data-jodit-temp="1" contenteditable="false" draggable="true" data-jodit_fake_wrapper="1" style="display: block; width: 300px; height: 54px;">
            <jodit-media data-jodit-temp="1" contenteditable="false" draggable="true" data-jodit_fake_wrapper="1" style="display: block; width: 300px; height: 54px;">
            <jodit-media data-jodit-temp="1" contenteditable="false" draggable="true" data-jodit_fake_wrapper="1" style="display: block; width: 300px; height: 54px;">
            <jodit-media data-jodit-temp="1" contenteditable="false" draggable="true" data-jodit_fake_wrapper="1" style="display: block; width: 300px; height: 54px;">
                <jodit-media data-jodit-temp="1" contenteditable="false" draggable="true" data-jodit_fake_wrapper="1" style="display: block; width: 300px; height: 54px;"><audio controls="">
                        <source src="https://www.pgaction.org/media/audio/members/valerie-woods-04.mp3" type="audio/mpeg">
                        Your browser does not support the audio tag.
                    </audio></jodit-media>
            </jodit-media>
            </jodit-media>
            </jodit-media>
            </jodit-media>
            </jodit-media>

[datahell]

You are right, there is problem. For now, clear the wrapping elements Jodit adds before save. Would you like to create an Elxis plugin for audio? If that helps, I can develop a plugin similar to the built-in HTML5 video plugin.

[armpouniotis]

An Elxis audio plugin will be very helpful !

I really need something like !

I want to embed audio files in my websites, but not in video format, as I am doing now !

Hurry up !

Christos

[datahell]

The audio player plugin is ready, you can download it from EDC.

HTML5 audio plugin usage instructions
Sample integrations of HTML5 audio plugin in Elxis editor.

Local file uploaded in media/audio/ folder:
{audio}myfile.mp3{/audio}

Multiple local files uploaded in media/audio/ folder:
{audio}myfile.mp3,myfile.ogg,myfile.wav{/audio}

Remote file:
{audio}https://www.html5tutorial.info/media/vincent.mp3{/audio}

Multiple remote files:
{audio}https://www.html5tutorial.info/media/vincent.mp3,https://www.html5tutorial.info/media/vincent.ogg{/audio}


Supported file types: mp3, ogg and wav.

[bledi]

The plugin works fine but below it shows error: Your browser does not support the audio element.
I have the latest Chrome version, the same happens with Firefox....maybe a ssl issue..
Attachement below
 

[datahell]

The plugin is fine. Not all files can be played with all the browsers. Even if, for example firefox can play a file on windows, it might not be able to play the same file on android. The most important thing to notice is the codec used. Most codecs are patented/commercial. If you use commercial codecs the audio might not be played. An other tip is to use multiple files for the same audio track (for instance both mp3 and ogg). Note 1: mp3 is a patented format. Note 2: ogg with vorbis codec is the best option for audio.

More help

MP3 to OGG online converter

Audio plugin implementation with both mp3 and ogg files:
{audio}test.mp3,test.ogg{/audio}

[bledi]

OK, great, useful info.
It may be a very good, and quick info tool, sometime.
Also what i would to like to mention for the future is a plugin for:
Tooltip wiki, like wikipedia tool tip or info. I made that with html and css, taken from internet, but not so nice and good looking, as an elxis plugin may be.

[datahell]

You dont need a plugin for tooltips. Just add your desired tooltip's js and/or css files to your template's index.php file and integrate them with the editor. Most tooltips work with a special css class and the element's "title" attribute or with "data" attribute (eg data-tooltip). There are js and css tooltips. I advice you to avoid big js scripts that requires jquery. CSS tooltips are now a good choice.

Here is a example with microtip (CSS only):

CSS file to include: https://github.com/ghosh/microtip/blob/master/microtip.css

HTML: <span aria-label="Hey tooltip!" role="tooltip">Hover to see tooltip</span>

There are many many other tooltips on the internet

[seadhna]

Hi datahell,
thanks for this! It would be great to have the ability to add an image and a caption. At the moment, I can do this by using the IMAGE plugin and the AUDIO plugin and then combining them within the same parent container in the code.

Regarding bledi's comment: "The plugin works fine but below it shows error: Your browser does not support the audio element."

I notice a little glitch that makes this error message appear even if the audio file is valid.
If the plugin is inside <p> tags, it's ok, but if the plugin is inside <p> tags and there is a line-break immediately after the opening <p> tag, the error message appears below the audio player on the front-end.

i.e. NO ERROR MESSAGE:
<p><code class="elx5_plugin">{audio}example.mp3 {/audio}</code></p>

ERROR MESSAGE APPEARS BELOW AUDIO PLAYER:
<p><br><code class="elx5_plugin">{audio}example.mp3 {/audio}</code></p>