wavesurfer.module

<?php

/**
 * Implements hook_libraries_info().
 *
 * Declare the wavesurfer library and files.
 */
function wavesurfer_libraries_info() {

  $libraries['wavesurfer'] = array(
    'name' => 'Wavesurfer',
    'vendor url' => 'http://waveform.fm',
    'download url' => 'http://www.wavesurfer.fm',
    'version callback' => 'wavesurfer_bypass_version_control',
    'files' => array(
      'js' => array(
        'src/wavesurfer.js',
        'src/webaudio.js',
        'src/webaudio.buffer.js',
        'src/webaudio.media.js',
        'src/audioelement.js',
        'src/drawer.js',
        'src/drawer.canvas.js'),
    ),
  );
  return $libraries;
}

/**
 * Callback function to bypass the library version check.
 */
function wavesurfer_bypass_version_control() {
  return TRUE;
}

/**
 * Implements hook_field_formatter_info().
 */
function wavesurfer_field_formatter_info() {
  $info = array(
    'wavesurfer_waveform' => array(
      'label' => 'Wavesurfer waveform player',
      'field types' => array('file'),
      'description' => t('Displays a waveform player generated from an audio file'),
      'settings' => array(
        'wavecolor' => '#ffffff',
        'progress_colour' => '#ffffff',
      ),
    ),
  );
  return $info;
}

/**
 * Implements hook_field_formatter_view().
 */
function wavesurfer_field_formatter_view($entity_type, $entity, $field, $instance, $langcode, $items, $display) {
  $elements = array();
  $settings = $display['settings'];
  switch ($display['type']) {
    case 'wavesurfer_waveform':
      foreach ($items as $delta => $item) {
        $elements[] = array(
          '#markup' => theme('wavesurfer_waveform', array('file' => (object) $item, 'settings' => $settings)));
      }
      break;
  }

  return $elements;
}

/**
 * Implements hook_field_formatter_settings_summary().
 *
 * Displays the field formatter settings for the Wavesurfer field.
 */
function wavesurfer_field_formatter_settings_summary($field, $instance, $view_mode) {

  $display = $instance['display'][$view_mode];
  $settings = $display['settings'];
  $summary = array();
  switch ($display['type']) {
    case 'wavesurfer_waveform':
      $summary[] = t('Wave Colour: %wavecolor', array('%wavecolor' => $settings['wavecolor']));
      $summary[] = t('Progress Colour: %progress_colour', array('%progress_colour' => $settings['progress_colour']));
      break;
  }

  return implode('<br />', $summary);
}

/**
 * Implements hook_field_formatter_settings_form().
 *
 * Adds colour settings to the field settings for Wavesurfer field.
 */
function wavesurfer_field_formatter_settings_form($field, $instance, $view_mode, $form, &$form_state) {
  $display = $instance['display'][$view_mode];
  $settings = $display['settings'];

  $element = array();
  switch ($display['type']) {
    case 'wavesurfer_waveform':
      $element['wavecolor'] = array(
        '#type' => 'jquery_colorpicker',
        '#title' => t('Background Waveform Colour'),
        '#required' => TRUE,
        '#default_value' => $settings['wavecolor'],
      );
      $element['progress_colour'] = array(
        '#type' => 'jquery_colorpicker',
        '#title' => t('Progress Waveform Colour'),
        '#required' => TRUE,
        '#default_value' => $settings['progress_colour'],
      );
      break;
  }

  return $element;
}

/**
 * Implements hook_theme().
 */
function wavesurfer_theme() {
  $theme = array();

  $theme['wavesurfer_waveform'] = array(
    'variables' => array('file' => NULL),
    'settings' => array(),
  );
  return $theme;
}


/**
 * Theme function for the Wavesurfer Audio field.
 */
function theme_wavesurfer_waveform($variables) {
  $file = $variables['file'];

  if (!$file) {
    return '';
  }
  $settings = $variables['settings'];
  // Extract settings variables; $wavecolor, $progress_colour.
  extract($settings);

  libraries_load('wavesurfer');

  $audiofile = file_create_url($file->uri);
  $js  = "jQuery(document).ready(function () {
            var wavesurfer = Object.create(WaveSurfer);
            wavesurfer.init({
                container: document.querySelector('#waveform'),
                waveColor: '#$wavecolor',
                progressColor: '#$progress_colour',
                renderer: 'Canvas',
                backend: 'WebAudioBuffer',
                fillParent: true,
            });
            wavesurfer.on('ready', function () {
              wavesurfer.play();
            });
            wavesurfer.load('$audiofile');
            (function () {
            var eventHandlers = {
                'play': function () {
                    wavesurfer.playPause();
                },
            };
            document.addEventListener('keydown', function (e) {
                var map = {
                    32: 'play',       // space
                };
                if (e.keyCode in map) {
                    var handler = eventHandlers[map[e.keyCode]];
                    e.preventDefault();
                    handler && handler(e);
                }
            });

            document.addEventListener('click', function (e) {
                var action = e.target.dataset && e.target.dataset.action;
                if (action && action in eventHandlers) {
                    eventHandlers[action](e);
                }
            });
          }());
        });";
  drupal_add_js($js, 'inline');

  // Container html.
  $output = '<div id="waveform"><div class="progress progress-striped active" id="progress-bar">
                        <div class="progress-bar progress-bar-info"></div>
                    </div></div>';

  // Controls HTML
  // @TODO Could probably add more in here and make it optional in settings.
  $output .= '<div class="controls">
                <button class="btn btn-primary" data-action="play">
                    <i class="play"></i>
                    Play
                    /
                    <i class="pause"></i>
                    Pause
                </button>
              </div>';

  return $output;
}