কীভাবে ক্রোমে অডিও অটোপ্লে তৈরি করবেন

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:

@ লিওনার্ডের মতে এর জন্য আরও একটি উপায় রয়েছে

iframeএমন একটি তৈরি করুন যা প্রথম লোডে অটোপ্লেকে কেবল ট্রিগার করতে কিছুই খেলবে না।

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

এমপি 3 ফাইল সাইলেন্স.এমপি 3 এর জন্য ভাল উত্স

তারপরে আপনার আসল অডিও ফাইলটি স্বাচ্ছন্দ্যে প্লে করুন।

<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 এর বিকাশকারী সাইটের কিছু প্রোগ্রামিং উদাহরণ সহ আরও তথ্য রয়েছে যা এখানে পাওয়া যাবে: 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);
}

ব্যবহারকারী পৃষ্ঠায় যে কোনও জায়গায় ক্লিক করলে সঙ্গীত শুরু হয়।

এটি তাত্ক্ষণিকভাবে ইভেন্টলিস্টনারকে সরিয়ে দেয়, সুতরাং আপনি যদি অডিও নিয়ন্ত্রণগুলি ব্যবহার করেন তবে ব্যবহারকারী এটি নিঃশব্দ বা বিরতি দিতে পারে এবং অন্য কোথাও ক্লিক করলে সংগীতটি আরম্ভ হয় না ..

Question 7

বিরক্তিকর বিজ্ঞাপনগুলির কারণে ব্রাউজারগুলি তাদের গোপনীয়তাটি অটোপ্লে ভিডিও বা অডিওতে পরিবর্তন করে। সুতরাং আপনি ঠিক নীচের কোড দিয়ে কৌতুক করতে পারেন।

আপনি 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>

এটির উত্স হিসাবে কেবল একটি এমপি 3 দিয়ে একটি অদৃশ্য iframe যুক্ত করুন এবং অডিও উপাদানটির আগে = "অটোপ্লে" এর অনুমতি দিন। ফলস্বরূপ, ব্রাউজারটি পরবর্তী যে কোনও অডিও ফাইল শুরু করতে চালিত হয়। অথবা এমন কোনও ভিডিও অটোপ্লে করুন যা নিঃশব্দ নয়।

Question 8

আপনি কেবল নিম্নলিখিত হিসাবে (.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 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 বার কৌতুকটি করা উচিত), অডিওটি স্বয়ংক্রিয়ভাবে চালিত হবে এবং তারপরে এটি কেবলমাত্র দুষ্টু পথে ফিরে আসার জন্য একটি সিগল রিফ্রেশের উপর কয়েকবার বাজবে। কল্পনাপ্রসূত!

গুগলের পক্ষ থেকে ঘোষণায় বলা হয়েছে যে মিডিয়া ফাইলগুলি "স্বয়ংক্রিয়ভাবে" খেলতে ব্যবহারকারীর এবং সাইটের মধ্যে একটি মিথস্ক্রিয়া অবশ্যই ঘটেছে। সুতরাং আমি এখন পর্যন্ত যে সেরা "সমাধান" এনেছি তা হ'ল একটি বোতাম যুক্ত করা, স্বয়ংক্রিয়র চেয়ে কম ফাইল চালানো, তবে অনেক বেশি স্থিতিশীল / নির্ভরযোগ্য।

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>

এইচটিএমএল:

<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

গুগল ক্রমের অভ্যন্তরে অটো-প্লে সম্পর্কে গত মাসে তাদের নীতি পরিবর্তন করেছে। এই ঘোষণা দেখুন ।

তবে আপনি যদি কোনও ভিডিও এম্বেড করছেন এবং এটি নিঃশব্দ করা থাকে তবে তারা অটো-প্লে করার অনুমতি দেয়। আপনি 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

Iframe বা জাভাস্ক্রিপ্ট ব্যবহার না করে সমাধান:

<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

ডিফল্ট এইচটিএমএল 5 audioঅটোপ্লে বৈশিষ্ট্যটি ক্রোমে কাজ করছে না, তবে আপনি জাভাস্ক্রিপ্ট ব্যবহার করে অডিও অটোপ্লেকে জোর করতে পারেন। এটা চেষ্টা কর:

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

এটি আমার পক্ষে কাজ করে।