Another way to embed audios and vidéos

[NedNet29]

Hi @aumouvantsillage and any one interested in Sozi,

I needed another way to embed sounds in a Sozi project than the one presented in Sozi's website that uses Inkscape Sozi plugin.

I need to show a big mindmap created with Wisemaping and to have several audio files commenting some parts of the map.
I wasn't going well with Sozi's Inkscape plugin to embed audio, since I didn't really get how to place the audio element afterwards in the presentation, and I didn't want as many audio elements as I have audio files in the resulting HTML page : I wanted each audio to be replaced by the next asked to be played.

So i decided to edit the mindmap with Inkscape in order to place little icons where I needed the audio comments, and set to them a link containing a call to a little JS function i wrote.
In addition, since I need this to be done as well by colleagues who are not skilled in IT, I tried to simplify the best I can the procedure and therefore wrote 2 very small JS and CSS files that can be added in Sozi thank's to it's "Custom Stylesheet and scripts" entry. I called this tiny project/feature "sonozise" in reference to "Sozi" and "sonoriser" which is french verb meaning "to sound".

Here's what I wrote as a procedure/documentation in the JS file :

associated file : sonozise.cs
purpose :
embed an hidden-at-first html audio element in the sozi presentation,
placed at the bottom left of the display window,
in order to play sounds when clicking on certain objects in the SVG.
The audio element appears at first click on a concerned object.

usage :

• in Inkscape
  • right-click on desired object and choose "Create Link" in the menu
  • at the bottom of the "Object Properties" dialog develop "Interactivity" part and set "onclick" field with following text :
    sonozisePlay('relative_path_to/myfile.mp3')
    where:
    • relative_path_to is a subfolder next to the Sozi generated html file where are placed the audio files to be played
    • myfile.mp3 is the name of the file to be played when clicking on concerned object
• in Sozi add both sonozise.js and sonozise.css files in "Custom stylesheets and scripts" dialog
• for publishing, all what is needed is
  • the Sozi generated html file
  • the subfolder containing the audio files

Please find attached these both files that I hope will be helpfull. Feel free to do whatever you want with them.
sonozise.css.txt
sonozise.js.txt
Please note I had to rename the files with a trailing ".txt" extension in order to be able to upload them here.

HTH
Ned

[NedNet29]

this is the new version of sonozise

You can now launch audio and videos easily from a Sozi presentation.
usage :

in Inkscape
    right-click on desired object and choose "Create Link" in the menu
    at the bottom of the "Object Properties" dialog develop "Interactivity" part and set "onclick" field with following text :
    sonozisePlayA('relative_path_to/myfile.mp3')
    or
    sonozisePlayV('relative_path_to/myfile.mov')
    where:
        relative_path_to is a subfolder next to the Sozi generated html file where are placed the audio files to be played
        myfile.mp3 ou myfile.mov is the name of the file to be played when clicking on concerned object
            function to be called is sonosizePlayA to play audio, sonozisePlayV to play video
in Sozi add both sonozise.js and sonozise.css files in "Custom stylesheets and scripts" dialog
for publishing, all what is needed is
    the Sozi generated html file
    the subfolder(s) containing the audio and/or video files

Remember to remove ".txt" extension to attached files in order tu use them
sonozise.css.txt
sonozise.js.txt

[aumouvantsillage]

I really like the idea to use links instead of creating custom XML elements.
It makes me think that your solution could replace the current audio/video implementation entirely.
Users could insert audio or video content without installing an Inkscape extension.

Have you considered using the href attribute of the link to set the path to the audio/video file?

[NedNet29]

Linking directly to the media file would cause the browser to open it, either in the current window, replacing the presentation, or a new window, but not in a player properly placed in the presentation window. Or perhaps maybe using an iframe as target ?
That's why my script dynamically adds an <audio> and a <video> html element to the presentation, and the function calls (SonozisePlayA(...) and SonozisePlayV(...)) set their src attribute.
it works like a charm as long as you put "javascript:void(0)" either
<a href="javascript:void(0);SonozisePlayA('myfle.mp3')">click to listen</a>
or
<a href="javascript:void(0)" onclick="SonozisePlayA('myfle.mp3')">click to listen</a>

I'm glad my litlle gadget may help :)

[aumouvantsillage]

OK. Thanks for the explanation.
I was under the impression that something like this would work:

<a href="myfile.mp3" onclick="SonozisePlayA(event)">Click to listen</a>

Considering that SonozisePlayA would access the href value via the passed event object, and would use preventDefault to disable the default link behavior.

However, from a non-expert user's point of view, having to set both href and onclick could be error-prone, as they are located in different dialogs in Inkscape.

[NedNet29]

I'm not very skilled in JS, didn't know about preventDefaultfor example. Besides I try to follow KISS principle, so sticking to default behaviour and most common solutions fits me.

I agree with your last point, but if such links should be set from Sozi (I imagine through a button allowing to "pick" the media file), it's your code that would write the href and/or onlick information, so non-expert wouldn't bother.

I think SonozisePlayX code could be changed in order to avoid javascript:void(0), but once again, if it's Sozi that writes it, why bother and risk to make more complex Sonozise code ?

[NedNet29]

just a side thought : I published first version under CC 4.0, 2nd under MOZZ PUB 2.0 (same as Sozi, to stick to it) : I'm also not very skilled about the slight differences between open source licenses : so feel free to use, change, publish and share Sonozise under any license you want.
Anyway, I built it following several tutorials on the web, so I can't really say it's a pure creation, on which I could claim ownership ;-)