'HTMLMediaElement' पर 'play' निष्पादित करने में विफल: API केवल उपयोगकर्ता इशारा

Question

द्वारा शुरू किया जा सकता है, मैं एक संगीत बजाना पृष्ठ बना रहा हूं, जहां मैं SoundManager 2 for AngularJs का उपयोग करता हूं। मैं एक गीत यूआरएल खेलने के लिए एक दूरस्थ एपीआई का उपयोग कर रहा हूँ।

element.bind('click', function() { 
    if (angular.isFunction(scope.loadFunction)) { 
     scope.loadFunction(scope.song, function() { 
      $log.debug('adding song to playlist'); 
      addToPlaylist(scope.song.playDetails); 

     }) 
    } else { 
     $log.debug('adding song to playlist'); 
     addToPlaylist(scope.song); 
    } 
}); 

मैं एक हिस्सा है, कि scope.loadFunction(song,callback) कॉल करता है और इस समारोह में एक गीत यूआरएल को लोड करता है के बाद यह वापस नियंत्रण कोणीय soundmanager2 को देने के लिए एक कॉलबैक कॉल कहाँ कहा: मैं एक कोणीय-soundmanager2 क्लिक ईवेंट हैंडलर बढ़ाया।

Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture. 

अगर एक गाना शुरुआत और async लोड होने से एक URL होता है ऐसा नहीं होता नहीं किया जाता है:

समस्या यह है कि Android के लिए Chrome पर मैं कोई त्रुटि मिलती है।

क्या इसके लिए कोई कामकाज है?

Answer 1

मुझे क्रोम बजाने वाली आवाज़ों के साथ प्रयोग करना पड़ा। यह पता चला कि उपयोगकर्ता इशारा (जैसे क्लिक) के बाद भी यह 1000ms के लिए इंतजार कर रहा है और यदि कोई आवाज नहीं खेला जाता है तो यह ऊपर अपवाद फेंकता है। मेरे मामले में समस्या एसिंक्रोनस ट्रैक यूआरएल लोडिंग से आ रही थी।

लेकिन यह भी पता चला कि पहले ट्रैक के बाद क्रोम इस 1000 एमएमएस देरी के लिए अब परवाह नहीं करता है और आप किसी भी समय के साथ प्रोग्रामेटिक रूप से खेल सकते हैं।

तो समाधान पहली बार एक उपयोगकर्ता ट्रैक पर क्लिक करने के बाद और उस भार के बाद एक वांछित ट्रैक यूआरएल के बाद स्थैतिक संसाधनों से माइक्रो-शून्य लंबी लंबी म्यूट ध्वनि चलाने का था।

उम्मीद है कि यह मदद करता है या किसी को अन्य समाधान मिलते हैं।

function playMicroTrack(scope, angularPlayer) { 
if (!scope.$root.isInitialized) { 
    soundManager.createSound({ 
     id: '-1', 
     url: '../../assets/lib/microSound.mp3' 
    }); 
    soundManager.play('-1'); 
    scope.$root.isInitialized = true; 
    } 
} 

फिर खेलने के निर्देश उपयोग के अंदर

:

एक समारोह बनाएँ:

ngSoundManager.directive('playAll', ['angularPlayer', '$log', 
function (angularPlayer, $log) { 
    return { 
     restrict: "EA", 
     scope: { 
      songs: '=playAll' 
     }, 
     link: function (scope, element, attrs) { 
      element.bind('click', function (event) { 

       playMicroTrack(scope, angularPlayer); 

       //first clear the playlist 
       angularPlayer.clearPlaylist(function (data) { 
        $log.debug('cleared, ok now add to playlist'); 
        //add songs to playlist 
        for (var i = 0; i < scope.songs.length; i++) { 
         angularPlayer.addTrack(scope.songs[i]); 
        } 

        if (attrs.play != 'false') { 
         //play first song 
         angularPlayer.play(); 
        } 
       }); 
      }); 
     } 
    }; 
} 
]); 

मेरे मामले में soundManager.play शामिल

Answer 2

यहाँ कैसे मैं soundmanager2 में इस समाधान embeded है कोड का एक टुकड़ा जो एक ट्रैक यूआरएल लाने के लिए सर्वर पर एसिंक कॉल भेजता है। यह मुद्दा पैदा कर रहा था।

आशा है कि यह

Answer 3

एंड्रॉवेट के समाधान के समान है। यहां बताया गया है कि मैंने इस मुद्दे को हल किया है। मैंने एक ऐसा फ़ंक्शन लिखा है जो सभी ध्वनियों को चलाता/रोकता है जिसे मैं उपयोग करना चाहता हूं। इस फ़ंक्शन को ऑनक्लिक कहा जाता है। यह क्लिक बहुत महत्वपूर्ण है। यह उपयोगकर्ता के इशारे की आवश्यकता होगी।

$("#myBtn").on("click", function(){ 
setSounds(); 
}); 

function setSounds() { 

    //Play and pause all sounds you want to use 
    var audio1 = $("#mus_1")[0]; 
    var audio2 = $("#mus_2")[0]; 

    audio1.play(); 
    audio1.pause(); 

    audio2.play(); 
    audio2.pause(); 
} 

खेल रहे हैं और रोक कर तुरंत सब आप उन्हें खेलने नहीं सुनाई देगा लगता है, वे "एक ग्राहक इशारा बाद लोड" किया जाएगा और आप कहते हैं/उन्हें प्रोग्राम के रूप में बाद में खेलने के लिए सक्षम हो जाएगा। उम्मीद है कि यह मदद करता है।

Answer 4

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) { 
    webSettings.setMediaPlaybackRequiresUserGesture(false); 
}