Moodle
  1. Moodle
  2. MDL-21990

insert voice comment into HTLArea editor (new toolbar button)

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Minor 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
    • Rank:
      5915

      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

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

        Activity

        Hide
        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
        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
        Nadav Kavalerchik added a comment -

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

        Show
        Nadav Kavalerchik added a comment - you can use audio-headset.gif and not ed-multimedia.gif (as i suggested, in the earlier comment)
        Hide
        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
        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
        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
        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: