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

      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

        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: