क्रोम पर ऑडियो ऑटोप्ले कैसे करें

Question 1

मोज़िला, माइक्रोसॉफ्ट एज और पुराने गूगल क्रोम में काम कर रहे ऑडियो ऑटोप्ले और साथ ही नए गूगल क्रोम में नहीं। उन्होंने ऑटोप्ले को अवरुद्ध कर दिया है। क्या गूगल क्रोम में इसे ऑडियो ऑटोप्ले बनाने का कोई तरीका है?

Question 2

समाधान # 1

यहाँ मेरा समाधान एक बनाने के लिए है iframe

<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe>

और audioगैर-क्रोम ब्राउज़रों के लिए टैग करें

<audio autoplay loop  id="playAudio">
    <source src="audio/source.mp3">
</audio>

और मेरे में script

  var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
  if (!isChrome){
      $('#iframeAudio').remove()
  }
  else {
      $('#playAudio').remove() // just to make sure that it will not have 2x audio in the background 
  }

समाधान # 2:

@Leonard के अनुसार इसके लिए एक और समाधान भी है

ऐसा बनाएं जो iframeपहले लोड में केवल ऑटोप्ले को ट्रिगर करने के लिए कुछ भी नहीं खेलता है।

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>

एमपी 3 फ़ाइल के लिए अच्छा स्रोत silence.mp3

फिर आराम से अपनी असली ऑडियो फाइल चलाएं।

<audio id="player" autoplay loop>
    <source src="audio/source.mp3" type="audio/mp3">
</audio>

व्यक्तिगत रूप से मैं समाधान # 2 को प्राथमिकता देता हूं क्योंकि यह जावास्क्रिप्ट में इतना भरोसा नहीं करने के लिए क्लीनर दृष्टिकोण है।

अगस्त 2019 को अपडेट करें

समाधान # 3

एक विकल्प के रूप में हम उपयोग कर सकते हैं <embed>

के लिए फ़ायरफ़ॉक्स ऐसा लगता है कि ऑडियो ऑटो-प्ले तो हम की जरूरत नहीं है काम कर रहा है <embed>तत्व है क्योंकि यह डबल ऑडियो चल रहा है पैदा करेगा।

// index.js
let audioPlaying = true,
    backgroundAudio, browser;
browser = navigator.userAgent.toLowerCase();
$('<audio class="audio1" src="audio.mp3" loop></audio>').prependTo('body');
if (!browser.indexOf('firefox') > -1) {
    $('<embed id="background-audio" src="audio.mp3" autostart="1"></embed>').prependTo('body');
    backgroundAudio = setInterval(function() {
        $("#background-audio").remove();
        $('<embed id="background-audio" src="audio.mp3"></embed>').prependTo('body');
    }, 120000); // 120000 is the duration of your audio which in this case 2 mins.
}

यदि आपके पास अपने ऑडियो के लिए टॉगल ईवेंट है, तो भी ऑडियो के लिए बनाए गए <embed>तत्व को निकालना सुनिश्चित करें ।

नोट: आपके टॉगल के बाद, यह शुरुआत से फिर से शुरू हो जाएगा क्योंकि <embed>पहले से ही हटा दिया गया है और <audio>तत्व अब सामान्य रूप से खेलेंगे।

$(".toggle-audio").on('click', function(event) {
    audioPlaying = !audioPlaying;
    $("#background-audio").remove();

    clearInterval(backgroundAudio);
    if (audioPlaying){
        $(".audio1").play();
        // play audio 
    }
    else {
        $(".audio1").pause();
    }

और अब इन <audio>और <embed>तत्वों को छिपाना सुनिश्चित करें

audio, embed {
    position: absolute;
    z-index: -9999;
}

नोट: diplay: noneऔर तत्व काम नहीं visibility: hiddenकरेगा <embed>।

Question 3

क्रोम में ऑडियो टैग के ऑटोप्ले-फंक्शन का उपयोग करने के लिए एक बहुत साफ चाल है।

जोड़ना

<iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>

जबकि silence.mp3केवल 0.5 सेकंड का मौन है।

यह

<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>

बाद में काम करता है।

क्रोम नोटिस करता है कि ध्वनि बजाई गई है और ऑडियो टैग में ऑटोप्ले की अनुमति देता है।

Question 4

अप्रैल 2018 तक, क्रोम की ऑटोप्ले नीतियां बदल गईं:

"Chrome की ऑटोप्ले नीतियां सरल हैं:

म्यूट किए गए ऑटोप्ले को हमेशा अनुमति दी जाती है।

ध्वनि के साथ ऑटोप्ले की अनुमति है यदि:

उपयोगकर्ता ने डोमेन (क्लिक, टैप, आदि) के साथ बातचीत की है।
डेस्कटॉप पर, उपयोगकर्ता का मीडिया एंगेजमेंट इंडेक्स थ्रेसहोल्ड पार कर गया है, जिसका अर्थ है कि उपयोगकर्ता ने पहले ध्वनि के साथ वीडियो चलाया है।
मोबाइल पर, उपयोगकर्ता ने अपने होम स्क्रीन पर साइट को जोड़ा है।

भी

शीर्ष फ्रेम ध्वनि के साथ ऑटोप्ले की अनुमति देने के लिए अपने iframes को ऑटोप्ले की अनुमति दे सकते हैं। "

Chrome की डेवलपर साइट में अधिक जानकारी है, जिसमें कुछ प्रोग्रामिंग उदाहरण भी शामिल हैं, जो यहां देखे जा सकते हैं: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Question 5

बस इस छोटी स्क्रिप्ट को https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio में दर्शाया गया है

<head>
<script>
window.onload = function() {
  var context = new AudioContext();
}
</script>
</head>

इस तरह से आप चाहते हैं के रूप में काम करेंगे:

<audio autoplay>
      <source src="hal_9000_sorry_dave.mp3">
</audio>

Question 6

कम से कम आप इसका उपयोग कर सकते हैं:

document.addEventListener('click', musicPlay);
function musicPlay() {
    document.getElementById('ID').play();
    document.removeEventListener('click', musicPlay);
}

जब उपयोगकर्ता पृष्ठ पर कहीं भी क्लिक करता है, तो संगीत शुरू होता है।

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

Question 7

आप निम्नलिखित (क्रोम डेस्कटॉप पर परीक्षण) के रूप में (.autoplay = true;) का उपयोग कर सकते हैं:

<audio id="audioID" loop> <source src="path/audio.mp3"  type="audio/mp3"></audio>

<script>
var myaudio = document.getElementById("audioID").autoplay = true;
</script>

यदि आपको स्टॉप / प्ले बटन जोड़ने की आवश्यकता है:

<button onclick="play()" type="button">playbutton</button>
<button onclick="stop()" type="button">stopbutton</button>

<audio id="audioID" autoplay loop> <source src="path/audio.mp3"  type="audio/mp3"> 
</audio>

<script>
var myaudio = document.getElementById("audioID");

function play() { 
return myaudio.play(); 
};

function stop() {
return myaudio.pause(); 
};
</script>

अगर आप स्टॉप / प्ले करना चाहते हैं तो एक सिंगल बटन:

<button onclick="PlayStop()" type="button">button</button>


<audio id="audioID" autoplay loop> <source src="path/audio.mp3"  type="audio/mp3"> 
</audio>

<script>
var myaudio = document.getElementById("audioID");

function PlayStop() { 
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>

यदि आप एक ही बटन पर स्टॉप / प्ले प्रदर्शित करना चाहते हैं:

<button onclick="PlayStop()" type="button">Play</button>


<audio id="audioID" autoplay loop> <source src="path/audio.mp3"  type="audio/mp3"> 
</audio>

<script>
var myaudio = document.getElementById("audioID");

function PlayStop() { 
if (elem.innerText=="Play") {
    elem.innerText = "Stop";
}
else {
    elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};`
</script>

कुछ ब्राउज़रों में ऑडियो सही ढंग से काम नहीं कर सकता है, इसलिए एक ट्रिक के रूप में आपके कोड से पहले iframe जोड़ने का प्रयास करें:

<iframe src="dummy.mp3" allow="autoplay" id="audio" style="display:none"></iframe>

<button onclick="PlayStop()" type="button">Play</button>


<audio id="audioID" autoplay loop> <source src="path/audio.mp3"  type="audio/mp3"> 
</audio>

<script>
var myaudio = document.getElementById("audioID");

function button() { 
if (elem.innerText=="Play") {
    elem.innerText = "Stop";
}
else {
    elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>

Question 8

ब्राउज़रों ने विज्ञापनों के कारण अपनी गोपनीयता को ऑटोप्ले वीडियो या ऑडियो में बदल दिया है जो कष्टप्रद है। तो आप बस नीचे दिए गए कोड के साथ ट्रिक कर सकते हैं।

आप iframe में कोई भी साइलेंट ऑडियो लगा सकते हैं।

<iframe src="youraudiofile.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio autoplay>
    <source src="youraudiofile.mp3" type="audio/mp3">
</audio>

एक .mp3 के साथ एक अदृश्य iframe को इसके स्रोत के रूप में जोड़ें और ऑडियो तत्व से पहले = "ऑटोप्ले" की अनुमति दें। नतीजतन, ब्राउज़र को किसी भी बाद की ऑडियो फ़ाइल को शुरू करने में धोखा दिया जाता है। या एक वीडियो को ऑटोप्ले करें जो मौन न हो।

Question 9

मैं आज इसे दूर कर रहा हूं, और मैं सिर्फ एक जिज्ञासा जोड़ना चाहता था जिसे मैंने चर्चा के लिए खोजा था।

वैसे भी, मैं इस से दूर चला गया हूँ:

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio id="audio" autoplay>
  <source src="helloworld.mp3">
</audio>

यह:

<audio id="myAudio" src="helloworld.mp3"></audio>
<script type="text/javascript">
  document.getElementById("myAudio").play();
</script>

और अंत में, यह एक "समाधान" है जो कुछ हद तक सीमा से बाहर है, यदि आप केवल अपनी चीज (जो हम करते हैं) उत्पन्न करेंगे:

<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<input onclick='responsiveVoice.speak("Hello World");' type='button' value='Play' />

मैंने जो खोज की है और यह भी वास्तव में अजीब (अजीब; अजीब; हास्यास्पद) हिस्सा है कि पूर्व दो के मामले में, आप वास्तव में f5 को उचित पाउंडिंग देकर सिस्टम को हरा सकते हैं; यदि आप दोहराव से बहुत तेज़ी से ताज़ा करते हैं (कुछ 5-10 बार चाल करना चाहिए), तो ऑडियो ऑटोप्ले होगा और फिर यह केवल एक बार रीगल रिफ्रेश पर कुछ देर बजाएगा, यह बुरे तरीके हैं। बहुत खुबस!

Google की घोषणा में यह कहा गया है कि मीडिया फ़ाइलों को "स्वचालित रूप से" चलाने के लिए, उपयोगकर्ता और साइट के बीच एक बातचीत हुई होगी। तो सबसे अच्छा "समाधान" जिसे मैंने इस तरह से दूर करने में कामयाब रहा है, एक बटन जोड़ने के लिए है, जो कि स्वचालित से कम फ़ाइलों के खेल को प्रस्तुत करता है, लेकिन बहुत अधिक स्थिर / विश्वसनीय।

Question 10

मैंने क्रोम और फायरफॉक्स में ऑटो प्ले हासिल करने के लिए पिक्सी.जेएस और पिक्सी-साउंड.जेएस का इस्तेमाल किया।

<script>

            PIXI.sound.Sound.from({
            url: 'audios/tuto.mp3',
            loop:true,
            preload: true,
            loaded: function(err, sound) {
                    sound.play();

            document.querySelector("#paused").addEventListener('click', function() {
            const paused = PIXI.sound.togglePauseAll();

            this.className = this.className.replace(/\b(on|off)/g, '');
            this.className += paused ? 'on' : 'off';

            });
            }
            });

</script>

HTML:

<button class="btn1 btn-lg off" id="paused">
    <span class="glyphicon glyphicon-pause off"></span>
    <span class="glyphicon glyphicon-play on"></span>
</button>

यह मोबाइल उपकरणों पर भी काम करता है, लेकिन उपयोगकर्ता को ध्वनि को ट्रिगर करने के लिए स्क्रीन पर कहीं स्पर्श करना पड़ता है।

Question 11

iframeइसके बजाय उपयोग करें :

<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>

Question 12

अस्थायी सुधार

$(document).on('click', "#buttonStarter", function(evt)
{
var context = new AudioContext();
document.getElementById('audioPlayer').play();
$("#buttonStarter").hide()
$("#Game").show()
});

या http://zohararad.github.io/audio5js/ को चलाने के लिए एक कस्टम खिलाड़ी का उपयोग करें

नोट: ऑटोप्ले को 31 दिसंबर में बदल दिया जाएगा

Question 13

मैं नियंत्रण विशेषता को भी टैग ऑडियो जोड़ता हूं, और बस इसे CSS में छिपाता हूं। और सभी क्रोम में ठीक काम करता है।

<audio autoplay loop controls id="playAudio">
  <source src="audio/source.mp3">
</audio>

Question 14

क्रोम के अंदर ऑटो-प्ले को लेकर Google ने पिछले महीने अपनी नीतियों में बदलाव किया। कृपया इस घोषणा को देखें ।

हालाँकि, यदि आप किसी वीडियो को एम्बेड कर रहे हैं और इसे म्यूट किया गया है, तो ऑटो-प्ले की अनुमति दें। आप mutedसंपत्ति जोड़ सकते हैं और यह वीडियो को खेलना शुरू करने की अनुमति देनी चाहिए।

<video autoplay controls muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Question 15

आइफ्रेम, या जावास्क्रिप्ट का उपयोग किए बिना समाधान:

<embed src="silence.mp3" type="audio/mp3" autostart="true" hidden="true">
        <audio id="player" autoplay controls><source src="source/audio.mp3" type="audio/mp3"></audio>

इस समाधान के साथ, इंटरनेट एक्सप्लोरर के ओपन / सेव डायलॉग से भी बचा जाता है।

   <embed src="http://deinesv.cf/silence.mp3" type="audio/mp3" autostart="true" hidden="true">
        <audio id="player" autoplay controls><source src="https://freemusicarchive.org/file/music/ccCommunity/Mild_Wild/a_Alright_Okay_b_See_Through/Mild_Wild_-_Alright_Okay.mp3" type="audio/mp3"></audio>

स्निपेट का विस्तार करें

Question 16

वीडियो टैग ऑडियो भी चला सकता है। ऑडियो टैग को देखते हुए ऐसा प्रतीत नहीं होता कि यह होना चाहिए, आप ऑडियो के लिए वीडियो टैग का उपयोग कर सकते हैं:

<video autoplay muted id="audio1" src="your.mp3" type="audio/mp3">
    Your browser does not support the <code>video</code> element.
</video>
<script>
    unmuteButton.addEventListener('click', function() 
        { 
            if ( unmuteButton.innerHTML == "unmute" )
            {
                unmuteButton.innerHTML = "mute";
                audio1.muted = false; 
            } else {
                unmuteButton.innerHTML = "unmute";
                audio1.muted = true; 
            }
        });
</script>

Question 17

आप उपयोग कर सकते हैं <iframe src="link/to/file.mp3" allow="autoplay">, यदि मूल में एक ऑटोप्ले अनुमति है। अधिक जानकारी यहाँ ।

Question 18

डिफ़ॉल्ट HTML5 audioऑटोप्ले विशेषता क्रोम में काम नहीं कर रही है, लेकिन आप जावास्क्रिप्ट का उपयोग करके ऑडियो ऑटोप्ले को मजबूर कर सकते हैं। इसे इस्तेमाल करे:

document.getElementById('myAudio').play();

यह मेरे लिए काम करता है।