Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-21990

insert voice comment into HTLArea editor (new toolbar button)

    Details

    • Type: New Feature
    • Status: Closed
    • Priority: Minor
    • Resolution: Won't Fix
    • Affects Version/s: 1.9
    • Fix Version/s: None
    • Component/s: HTML Editor (TinyMCE)
    • Labels:
      None
    • Difficulty:
      Moderate
    • Affected Branches:
      MOODLE_19_STABLE

      Description

      This new toolbar icon (popup window) enable the user to record an MP3 audio/voice comment
      using the services of voice-it.biz (http://www.voice-it.biz/homepage) an get back a link to the
      recorded MP3 file (stored on voice-it.biz servers) which is embedded into the content area.

      by using the multimedia filter and by enabling MP3 filtering... the link turns into a player
      ( this is how we use it )

      for more info about voice-it.biz services: http://www.voice-it.biz/pagine/dettaglio/main_menu,3/versions,22.html

      implementation follows in the comments

      enjoy

        Gliffy Diagrams

          Attachments

          1. audio-headset.gif
            audio-headset.gif
            0.3 kB
          2. ed-multimedia.gif
            ed-multimedia.gif
            1.0 kB
          3. insert_multimedia.php
            4 kB
          4. voice-comment.png
            voice-comment.png
            2 kB
          5. voice-comment-screenshot.png
            voice-comment-screenshot.png
            224 kB
          6. voice-it-record-and-send-voice.js
            4 kB

            Activity

            Hide
            nadavkav Nadav Kavalerchik added a comment -

            add the following code to the moodle/lib/editor/htmlarea/htmlarea.php file

            around line 172 add :

            "insertmultimedia",

            around line 263 add:

            insertmultimedia: [ "Insert voice comment", "audio-headset.gif", false, function(e) {e.execCommand("insertmultimedia");} ],

            around line 2222 add:

            case "insertmultimedia": this._insertMultimedia(); break;

            add a new function (around line 1732) :

            // Called when the user clicks the Insert Multimedia button
            HTMLArea.prototype._insertMultimedia = function() {
                var sel = this._getSelection();
                var range = this._createRange(sel);
                var editor = this;  // for nested functions
                this._popupDialog("insert_multimedia.php?id=<?php echo $id; ?>", function(param) {
                    if (!param) {   // user must have pressed Cancel
                        return false;
                    }
                    var doc = editor._doc;
                    // create the DIV element  to hold the OBJECT embed inside of it
                    newDiv = doc.createElement("div");
             
                    // assign the given arguments
                    for (var field in param) {
                        var value = param[field];
                        if (!value) {
                            continue;
                        }
                        switch (field) {
                            case "multimediacode"   : newDiv.innerHTML = value; break;
                        }
                    }
             
                    // add the newly created element and it's content into the DOM
                    //my_div = document.getElementById("org_div1");
                    //document.body.insertBefore(newDiv, my_div);
             
                    if (HTMLArea.is_ie) {
                        range.pasteHTML(newDiv.outerHTML);
                    } else {
                        // insert the table
                        editor.insertNodeAtSelection(newDiv);
                    }
                    return true;
                }, null);
            };

            open the file moodle/lib/editor/htmlarea/dialog.js and around line 39 add:

            case "insert_multimedia": x = 460; y = 460; break;

            that is all the patching.

            now, put "insert_multimedia.php" , "voice-it-record-and-send-voice.js" , "voice-comment.png" into: moodle/lib/editor/htmlarea/popups/
            place "ed-multimedia.gif" it inside moodle/lib/editor/htmlarea/images/

            and add a few new language strings to your local editor.php language file.

            $string['leavevoicecomment'] = 'Click me to record a voice comment';
            $string['listentocomment'] = 'Listen to the recorded message';
            $string['voicecommentsaved'] = 'Your voice comment was saved successfully, please press OK button to close the dialog window ;

            Show
            nadavkav Nadav Kavalerchik added a comment - add the following code to the moodle/lib/editor/htmlarea/htmlarea.php file around line 172 add : "insertmultimedia", around line 263 add: insertmultimedia: [ "Insert voice comment", "audio-headset.gif", false, function(e) {e.execCommand("insertmultimedia");} ], around line 2222 add: case "insertmultimedia": this._insertMultimedia(); break; add a new function (around line 1732) : // Called when the user clicks the Insert Multimedia button HTMLArea.prototype._insertMultimedia = function() { var sel = this._getSelection(); var range = this._createRange(sel); var editor = this; // for nested functions this._popupDialog("insert_multimedia.php?id=<?php echo $id; ?>", function(param) { if (!param) { // user must have pressed Cancel return false; } var doc = editor._doc; // create the DIV element to hold the OBJECT embed inside of it newDiv = doc.createElement("div");   // assign the given arguments for (var field in param) { var value = param[field]; if (!value) { continue; } switch (field) { case "multimediacode" : newDiv.innerHTML = value; break; } }   // add the newly created element and it's content into the DOM //my_div = document.getElementById("org_div1"); //document.body.insertBefore(newDiv, my_div);   if (HTMLArea.is_ie) { range.pasteHTML(newDiv.outerHTML); } else { // insert the table editor.insertNodeAtSelection(newDiv); } return true; }, null); }; open the file moodle/lib/editor/htmlarea/dialog.js and around line 39 add: case "insert_multimedia": x = 460; y = 460; break; that is all the patching. now, put "insert_multimedia.php" , "voice-it-record-and-send-voice.js" , "voice-comment.png" into: moodle/lib/editor/htmlarea/popups/ place "ed-multimedia.gif" it inside moodle/lib/editor/htmlarea/images/ and add a few new language strings to your local editor.php language file. $string['leavevoicecomment'] = 'Click me to record a voice comment'; $string['listentocomment'] = 'Listen to the recorded message'; $string['voicecommentsaved'] = 'Your voice comment was saved successfully, please press OK button to close the dialog window ;
            Hide
            nadavkav Nadav Kavalerchik added a comment -

            you can use audio-headset.gif and not ed-multimedia.gif (as i suggested, in the earlier comment)

            Show
            nadavkav Nadav Kavalerchik added a comment - you can use audio-headset.gif and not ed-multimedia.gif (as i suggested, in the earlier comment)
            Hide
            danmarsden Dan Marsden added a comment -

            we now use tinymce and have some other 3rd party plugins in Moodle 2 that do similar things including a GSOC project this year - closing this one as won't fix. Thanks!

            Show
            danmarsden Dan Marsden added a comment - we now use tinymce and have some other 3rd party plugins in Moodle 2 that do similar things including a GSOC project this year - closing this one as won't fix. Thanks!
            Hide
            nadavkav Nadav Kavalerchik added a comment -

            Agree! I saw and installed the GSOC plugins on several of our Moodle 2.3 systems and they are a great replacement for this old JAVA technology (which is still used on may of our Moodle 19x servers. even today, 2012)

            Show
            nadavkav Nadav Kavalerchik added a comment - Agree! I saw and installed the GSOC plugins on several of our Moodle 2.3 systems and they are a great replacement for this old JAVA technology (which is still used on may of our Moodle 19x servers. even today, 2012)

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved: