Elxis CMS Forum
Support => Elxis 4.x/5.x DEV => Topic started by: seadhna on May 26, 2020, 14:42:46
-
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>
-
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.
-
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
-
The audio player plugin is ready, you can download it from EDC (https://www.elxis.net/edc/multimedia/157.html).
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.
-
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
-
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 (https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs)
MP3 to OGG online converter (https://convertio.co/mp3-ogg/)
Audio plugin implementation with both mp3 and ogg files:
{audio}test.mp3,test.ogg{/audio}
-
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.
-
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 (https://github.com/ghosh/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
-
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>