在移动浏览器中播放拖放音频

我有一个拖放的网站,可用于计算机,平板电脑和手机.它使用jQuery,jQuery UI和jQuery UI Touch Punch.拖动会导致播放短音频片段,同时播放也会播放.这个小提琴有一个例子.

不幸的是,在当前版本的iOS Safari和Android Chrome中,音频无法正常工作.有办法解决这个问题吗？

此图像解释了各种浏览器版本中的行为:

图片说明:

iOS Safari:在iOS 8.4及更低版本中,拖动音频和丢弃音频都会播放.在iOS 9.0及更高版本中,拖动音频和丢弃音频都不会播放.

Android Chrome:在版本51.0.2704.81中,拖动音频和丢弃音频都会播放.在版本52.0.2743.98和版本55.0.2883.91中,拖动音频和丢弃音频都不会播放.在版本56.0.2924.87和63.0.3239.111中,拖动音频不播放,但丢弃的音频播放.

这是代码,如果小提琴消失了:

  
    
    
    
    
    
    
  
  
    

      

        

          
Drag me to my target
        
        

          
Drop here
        
      
      

        
Enable any DOM element to be droppable, a target for draggable elements.
      
    

    
    
    
    
    
    
  

Munim Munna.. 6

由于诸多原因,播放音频现在在移动设备中受到很大限制,以改善烦人广告的用户体验.你可以在这里详细阅读.

现在,您需要通过有效的用户手势事件播放音频元素.这就是你的drop事件正在工作但拖动事件不起作用的原因.

在这种情况下,Click事件最可靠.您所要做的就是首先通过点击事件播放音频,这将激活音频,然后您可以随后播放任何事件.

在这种情况下,最佳做法是让用户在执行任何操作之前单击按钮,然后静默播放音频,或者只播放音频的最后一个mili-second,这通常是静音.然后音频元素工作得很好.

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

启用功能仅播放最后一毫秒.

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);
}

这是一个有效的JSFiddle演示.

由于诸多原因,播放音频现在在移动设备中受到很大限制,以改善烦人广告的用户体验.你可以在这里详细阅读.

现在,您需要通过有效的用户手势事件播放音频元素.这就是你的drop事件正在工作但拖动事件不起作用的原因.

在这种情况下,Click事件最可靠.您所要做的就是首先通过点击事件播放音频,这将激活音频,然后您可以随后播放任何事件.

在这种情况下,最佳做法是让用户在执行任何操作之前单击按钮,然后静默播放音频,或者只播放音频的最后一个mili-second,这通常是静音.然后音频元素工作得很好.

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

启用功能仅播放最后一毫秒.

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);
}

这是一个有效的JSFiddle演示.