Inline Player insertion and WYSIWYG Editor Integration

subscribing

I'm looking forward to do something like this with the "jplayer", "wysiwyg" and "media" modules. It looks like there will be some work to do on the media and jplayer sides. I need this to be done quickly, so expect patches coming soon.

As a side note, the media module already adds an "insert media" button to wysiwyg. It already works for inserting inline images but audio is not really implemented yet as I can see. So I will try to implement this specific solution.

possible blocking issue on media module: #1314266: Replace media tag in wysiwyg only if the type equals to "media"

Did some more tests and in fact it's already working to some extent. The only issue is the preview in the wysiwyg editor. Right now it appear as an image, here is a little comment from media module (media/js/wysiwyg-media.js):

    // @TODO: the folks @ ckeditor have told us that there is no way
    // to reliably add wrapper divs via normal HTML.
    // There is some method of adding a "fake element"
    // But until then, we're just going to embed to img.
    // This is pretty hacked for now.

Here is my install script:

cd /Applications/MAMP/htdocs/
mkdir d7_media
cd d7_media
git clone --branch 7.x git://git.drupal.org/project/drupal.git .
drush site-install -y standard --account-name=test --account-pass=test --db-url=mysql://root:root@localhost/sandbox_d7_media
drush dl devel

cd sites/all/modules
git clone --branch 7.x-2.x http://git.drupal.org/project/media.git
git clone --branch 7.x-2.x http://git.drupal.org/project/jplayer.git
git clone --branch 7.x-2.x http://git.drupal.org/project/file_entity.git
git clone --branch 7.x-1.x http://git.drupal.org/project/ctools.git
git clone --branch 7.x-2.x http://git.drupal.org/project/wysiwyg.git

cd ..
mkdir libraries
cd libraries
wget http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.6.2/ckeditor_3.6.2.zip
unzip ckeditor_3.6.2.zip
rm ckeditor_3.6.2.zip
wget http://jplayer.org/latest/jQuery.jPlayer.2.1.0.zip
unzip jQuery.jPlayer.2.1.0.zip
rm jQuery.jPlayer.2.1.0.zip
mv jQuery.jPlayer.2.1.0 jplayer
drush en media jplayer wysiwyg devel -y

things to do to when this setup is installed:

• enable the "Converts Media tags to Markup" in admin/config/content/formats/filtered_html
• enable ckeditor for filtered HTML in admin/config/content/wysiwyg . configure it and add the "media browser" button
• enable jPlayer for the "large" audio file display mode in admin/config/media/file-types/manage/audio/file-display/media_large

Then you can create a content and insert inline audio in wysiwyg with the media browser button (dont forget to select the "large" file mode after you uploaded a file)

edit: it stopped working after first success, so this needs some work

Found the corresponding media issue: #1283844: [meta] Improve WYSIWYG integration

I managed to work out a hack using preprocess to get inline audio files to play. Via a custom module, need to ensure that the expected settings are in Drupal.settings javascript. This solution has some values hardcoded for my project, but it can be a starting point if anyone else is stuck.

function mymodule_preprocess_node(&$vars)
{
    if (isset($vars['body'][0]['value']) && false !== strpos($vars['body'][0]['value'], 'jp-audio')) {
        // ensure jp-player stylesheet and javascript load
        if ($attach = jplayer_add_core_js()) {
            drupal_render($attach);
        }

        // ensure jplayerInstance settings are configured
        $body = $vars['body'][0]['value'];
        if (preg_match_all('/id=\"(jplayer-file[\D]+[^"]+)\"/', $body, $match)) {

            $player['jplayerInstances'] = array();

            foreach ($match[1] as $id) {
                if (preg_match('/_interface$/', $id) || preg_match('/_playlist$/', $id) || preg_match('/_item_\d+$/', $id)) {
                    continue;
                }
                
                // get the fid out of the id attribute and load the file
                preg_match('/file-(\d+)/', $id, $m2);
                $file = file_load($m2[1]);
                $ext = pathinfo($file->filename, PATHINFO_EXTENSION);
                $player['jplayerInstances'][$id] = array(
                    'files' => array(array(
                        $ext => file_create_url($file->uri),
                    )),
                    'solution' => 'html, flash',
                    'supplied' => 'mp3',
                    'preload' => 'metadata',
                    'volume' => 0.8,
                    'muted' => false,
                    'autoplay' => false,
                    'repeat' => 'none',
                    'backgroundColor' => '000000',
                );
            }
            drupal_add_js($player, 'setting');
        }
    }
}