Region Dragging in Ionic

I am using wavesurfer and the regions plugin on an angular website and an ionic app.

My regions setup works fine on the angular website, however dragging the region did not work in Ionic.

I’ve made modifications to the regions plugin to use Ionic Gestures to enable dragging. This works, but I don’t need resizing support for my case so this feature is not implemented.

The changes are to the regions plugin to the WaveSurfer.Region.bindEvents method, and I added a check to see if Ionic is available:

    /* Bind DOM events. */
    bindEvents: function () {
        var my = this;

        this.element.addEventListener('mouseenter', function (e) {
            my.fireEvent('mouseenter', e);
            my.wavesurfer.fireEvent('region-mouseenter', my, e);
        });

        this.element.addEventListener('mouseleave', function (e) {
            my.fireEvent('mouseleave', e);
            my.wavesurfer.fireEvent('region-mouseleave', my, e);
        });

        this.element.addEventListener('click', function (e) {
            e.preventDefault();
            my.fireEvent('click', e);
            my.wavesurfer.fireEvent('region-click', my, e);
        });

        this.element.addEventListener('dblclick', function (e) {
            e.stopPropagation();
            e.preventDefault();
            my.fireEvent('dblclick', e);
            my.wavesurfer.fireEvent('region-dblclick', my, e);
        });

        /* Drag or resize on mousemove. */
        (this.drag || this.resize) && (function () {

          var duration = my.wavesurfer.getDuration();
          var drag;
          var resize;
          var startTime;

          // For ionic, use the ionic EventController for the drag event
          if(!!ionic && !!ionic.EventController){
            function onDrag(e) {
              e.clientX = e.gesture.center.pageX;
              var time = my.wavesurfer.drawer.handleEvent(e) * duration;
              var delta = time - startTime;
              startTime = time;

              // Drag
              if (my.drag) {
                my.onDrag(delta);
              }
            }
            function onDragStart(e){
              e.clientX = e.gesture.center.pageX;
              startTime = my.wavesurfer.drawer.handleEvent(e) * duration;
            }
            function onDragEnd(e){
              e.stopPropagation();
              e.preventDefault();

              my.fireEvent('update-end', e);
              my.wavesurfer.fireEvent('region-update-end', my, e);
            }

            var dragEvent = ionic.EventController.onGesture('drag', onDrag, my.element);
            var dragEnd = ionic.EventController.onGesture('dragend', onDragEnd, my.element);
            var dragStart = ionic.EventController.onGesture('dragstart', onDragStart, my.element);

            my.on('remove', function () {
              ionic.EventController.offGesture(dragEvent, 'drag');
              ionic.EventController.offGesture(dragEnd, 'dragend');
              ionic.EventController.offGesture(dragStart, 'dragstart');
            });

            my.wavesurfer.on('destroy', function () {
              ionic.EventController.offGesture(dragEvent, 'drag');
              ionic.EventController.offGesture(dragEnd, 'dragend');
              ionic.EventController.offGesture(dragStart, 'dragstart');
            });
          }
          else{
            var onDown = function (e) {
                e.stopPropagation();
                startTime = my.wavesurfer.drawer.handleEvent(e) * duration;

                if (e.target.tagName.toLowerCase() == 'handle') {
                    if (e.target.classList.contains('wavesurfer-handle-start')) {
                        resize = 'start';
                    } else {
                        resize = 'end';
                    }
                } else {
                    drag = true;
                }
            };
            var onUp = function (e) {
                if (drag || resize) {
                    drag = false;
                    resize = false;
                    e.stopPropagation();
                    e.preventDefault();

                    my.fireEvent('update-end', e);
                    my.wavesurfer.fireEvent('region-update-end', my, e);
                }
            };
            var onMove = function (e) {
                if (drag || resize) {
                    var time = my.wavesurfer.drawer.handleEvent(e) * duration;
                    var delta = time - startTime;
                    startTime = time;

                    // Drag
                    if (my.drag && drag) {
                        my.onDrag(delta);
                    }

                    // Resize
                    if (my.resize && resize) {
                        my.onResize(delta, resize);
                    }
                }
            };

            my.element.addEventListener('mousedown', onDown);
            my.wrapper.addEventListener('mousemove', onMove);
            document.body.addEventListener('mouseup', onUp);

            my.on('remove', function () {
                document.body.removeEventListener('mouseup', onUp);
                my.wrapper.removeEventListener('mousemove', onMove);
            });

            my.wavesurfer.on('destroy', function () {
                document.body.removeEventListener('mouseup', onUp);
            });
          }

        }());
    },

I’m not sure if you’ll want to add Ionic support naively in wavesurfer.js, but hopefully this will help anyone using regions with Ionic.

Also, thanks for the great work on this project @katspaugh

[conor-mac-aoidh]

I needed a backend that worked with the cordova-plugin-media, so I added a new one:

https://gist.github.com/conor-mac-aoidh/4afcd016fb7db7ff13110ca718b71d0a

Tested and working on iOS. On Android, the WebAudio backend can be used with wkwebview.

I’ve also added the ionic region dragging to a gist:

https://gist.github.com/conor-mac-aoidh/2d6a3b858b932091bfa7e02ea3b20825

[sritej]

I am trying to use this plugin in a ionic app. I have copied the controller part and the html links to wavesurfer file. I am able to play the audio but the seekbar is not getting updated and when i select an other audio, the waves are not getting updated. Is there any one got it worked with an ionic app.

I have used the code sample from example - angular folder.

Any help is very much appreciated.