7

I have a site that has dragging and dropping and is intended to work on computers, tablets, and phones. It uses jQuery, jQuery UI, and jQuery UI Touch Punch. Dragging causes a short audio clip to play, as does dropping. This fiddle has an example.

Unfortunately, the audio is not working correctly in current versions of iOS Safari and Android Chrome. Is there a way to fix that?

This image explains the behavior in various browser versions:

Description of image:

iOS Safari: In iOS 8.4 and below, the dragging audio and dropping audio both play. In iOS 9.0 and above, the dragging audio and dropping audio both don't play.

Android Chrome: In version 51.0.2704.81, the dragging audio and dropping audio both play. In version 52.0.2743.98 and version 55.0.2883.91, the dragging audio and dropping audio both don't play. In version 56.0.2924.87 and 63.0.3239.111, the dragging audio doesn't play, but the dropping audio does.

Here is the code, should the fiddle ever go away:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Drag and Drop with Audio</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.all.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/css/lightness/jquery-ui-1.10.2.custom.min.css" rel="stylesheet">
    <style>
      body {
        background: #fff;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      #draggable {
        width: 100px;
        height: 100px;
        padding: 0.5em;
        float: left;
        margin: 10px 10px 10px 0;
      }

      #droppable {
        width: 150px;
        height: 150px;
        padding: 0.5em;
        float: left;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="demo">
        <div id="draggable" class="ui-widget-content">
          <p>Drag me to my target</p>
        </div>
        <div id="droppable" class="ui-widget-header">
          <p>Drop here</p>
        </div>
      </div>
      <div class="demo-description" style="display: none; ">
        <p>Enable any DOM element to be droppable, a target for draggable elements.</p>
      </div>
    </div>

    <audio id="audio-drag" src="data:audio/mpeg;base64,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E/LS+XjRIcwkQiojYjY5y5/1pl9IlC8PQ0QUsgEaOQkC4af/////////9SBI//NAxOwWAUaqWZh4ACJL/3+cMnrIAjVvCzCkhtLVfUUJgAEw4dGougkgCAhohgiBpdKAiywLBjhlQ5igBMaDR8OyTQrTGTGTSaajWhobABYSGhalQVkqzVvtMKDSPPLrSUjn9dZghQH/83DE7yajDt8fmWgEialaQQEsq9SlYZmzAS47ZF1NBV2zljJoABBFCVDkHlrUs6zJwUNy7Cu4zLIbkppaAjoVq4jE45cJZTiuVXMEO2mDp0EqxwKVTNV0suQ0ghlaTpsIBuFwC/awaRSCn////////1crm+///3DVPUwz7/////7///f//77jV//1lupa5/7qSqlt//49/Vff///fzgEAELKvKwYIA6tBLaowA/y6meplJeAZCv/zgMT9OTMOvn+awASsp02MeS2jMmPTzQpwhAjCPQX4DWOkylCC3FvQQhomocqGszaXCDDw+P5hlgMbbqA4i3n6dMaE+YjoZEehB2ogdZY2ZJsKunYnKc4EPgPpYEJCiDoXWr15lcqK7bGg6g5gNz2e1dzvFwzrpxVb9tgssHFt////KEM795fX//92uPNrH///x/nNv/////4z18onW/rdqz7S5jXVQQCizszrCGgDZjNnrjADXn3f1HOUKzocS5S6Ax7viFLUGcpWQlcpexT/84DE2yxKzsJ/mHgAzEPoJwla8NxuP03TpLabagbzVTLGxIchWWFbOgxn9GA4U85WhMRbEIVjaqzJLls6lanYB1SvXvSaFvGmJeqEFtJ6/zWfcNPIdP6tj2dkZk5M4Q47+AkCwspOluMTlkxbNf///8GscCmVD/X/vHfxnu74xT/+us53v43///b/+I3v38elpr13//8eDQ/lVQAEFKqw7OQmDGzdMAgAA0cIKuR5GVF4iWRIgvspkBbFsR4SpRaDTDIVTVVC2mIHWq4hdwMI//OAxOwtku7Cf5h4AAagap4j1CZj/SzEwkFiH8OcC9DZ2cgmYJ+gwgvSyTp/HeQR4520FcJseo9IJkOoDKO5sabNwX4m5e0I1qQ5kOQ7Xx0KDbE3CZEyLcLcKaky2GqN+qyh7uBqQ3iUkJOmnxySp6Y6kS263ChuLDF//////////////zVWnsqqIgEhdqtplJRm19n8zGUblwixetdVgbw0gWVBWBQ5agsKHKWIpmjx0+KOJRSVSqZbVvoTlvC1NU1LKocYZDeYXIjFu5Coef/zcMT4LEputn+YeABg3gdp4XvYNGXvhTAZdarOFF4PjFe9//E+RL//6bLf//6m4JhUHY///jdlNh9R1v////66SDe0ribsljpUCakAc2SCBUCLmEGY46EI1c/x6qL8dZsFWZh3KNqkzLFtndNemtGgoJoa6MU54bx48TaiBh0xlkgK+JpsbJDoOlNo8fus7//ia3r/l/L+q4vzj+n///rJj//7qcx4Mm4gBiAYYQQBgMAcIxvC//NQxO8eYYrLGZjAIOwnqlYO1D0HwrfkIslPzYUIrf4pBZUkBa/8oAsA0c5Cd//nCsKoiR7VTEFNRTMuOTkuNVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zUMTqGfGyolmZeABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVX/8yDE9w1JZp45jVAAVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//MQxOgAAANIAcAAAFVVVVVVVVVVVVVVVVU="></audio>
    <audio id="audio-drop" src="data:audio/mpeg;base64,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"></audio>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
    <script>
      $(function() {
        $("#draggable").draggable({
          start: function() {
            $("#audio-drag")[0].play();
          }
        });
        $("#droppable").droppable({
          drop: function(event, ui) {
            $("#audio-drop")[0].play();
            $(this)
              .addClass("ui-state-highlight")
              .find("p")
              .html("Dropped!");
          }
        });
      });
    </script>
  </body>
</html>
Nick
  • 8,049
  • 18
  • 63
  • 107
  • Is using separate sound files an option? If so, you may have more luck using an audio buffer. I've only seen them done using external resources but there may be a way using inline base64 data. For the vast majority of mobile browsers now there are definitely different restrictions on audio playback depending on which event you are targetting. For instance, if you simply attatch a click event to a button which triggers audio playback, this is permitted for the vast majority, but touchstart is a different story. Using a buffer seems to reduce the restriction somewhat. – Perran Mitchell Jan 26 '18 at 20:16

1 Answers1

7

Playing audio is now being quite restricted in mobile devices for many reasons to improve user experience out of annoying ads. You can read it in detail here.

Now you need to play the audio element by valid user gesture events. That's why your drop event is working but the drag event is not.

Click event is most reliable in this case. All you have to do is play the audio by a click event first, this will activate the audio, then you can play it with any events afterwards.

The best practices in this case are to make the user click a button before doing anything and play the audio silently or just play the last mili-second of the audio which is generally silent. Then the audio element works just fine.

$("#ibutton").click(function(){
    enable_audio($('#audio-drag'));
    enable_audio($('#audio-drop'));
});

The enable function plays only last milisecond.

function enable_audio(el){
    var myaudio=el[0];
    if(el.data('audio_enabled'))return;
    myaudio.currentTime=myaudio.duration-1;
    myaudio.play().then(function(){myaudio.pause();myaudio.load();});
    el.data('audio_enabled',true);
}

Here is a working JSFiddle Demo.

Munim Munna
  • 17,178
  • 6
  • 29
  • 58
  • Working in all my android devices. Great piece of code – Zahan Safallwa Jan 30 '18 at 11:16
  • This approach had no change for me on Android Chrome (tested with version 64.0.3282.123), but it did cause the drag audio to work on iOS Safari (tested with iOS 11.2), but, of course, the drop audio still wouldn't work since an acceptable user gesture still hasn't been performed for it. The site I'm doing this for actually has multiple drag and drop elements on a single page, so I think I would have to have the user tap on a button on page load that plays the last millisecond of a particular ` – Nick Jan 30 '18 at 21:12
  • Yes thats right. But you need to click enable audio button first to make the audio play on drag event on chrome on android. Drop will also work on IOS if you enable the drop audio on button click. – Munim Munna Jan 30 '18 at 21:32
  • Yes, I used the button on Android Chrome and it still didn't work. – Nick Feb 01 '18 at 02:13
  • When you play the last __second__ of the audio instead of __millisecond__ it works in Chrome version __64.0.3282.137__ on android. – Munim Munna Feb 02 '18 at 11:01
  • Now you can test it in chrome in android, it is working in __64.0.3282.137__. – Munim Munna Feb 02 '18 at 15:39