Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Play Audio on Drag and Drop in Mobile Browsers

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>
like image 368
Nick Avatar asked Jan 23 '18 15:01

Nick


1 Answers

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.

like image 89
Munim Munna Avatar answered Sep 26 '22 12:09

Munim Munna