วิธีทำให้เสียงเล่นอัตโนมัติบน Chrome

Question 1

เล่นอัตโนมัติด้วยเสียงที่ทำงานใน Mozilla, Microsoft edge และ google chrome เก่าเช่นกัน แต่ไม่ได้อยู่ใน google chrome ใหม่ พวกเขาบล็อกการเล่นอัตโนมัติ มีวิธีใดบ้างที่จะทำให้เสียงเล่นอัตโนมัติใน Google Chrome

Question 2

โซลูชัน # 1

ทางออกของฉันที่นี่คือการสร้างไฟล์ iframe

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

และaudioติดแท็กเช่นกันสำหรับเบราว์เซอร์ที่ไม่ใช่ Chrome

<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>

แหล่งที่ดีสำหรับไฟล์ mp3 เงียบ. mp3

จากนั้นเล่นไฟล์เสียงจริงของคุณอย่างสบายใจ

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

โดยส่วนตัวแล้วฉันชอบโซลูชัน # 2เนื่องจากเป็นแนวทางที่สะอาดกว่าโดยไม่ต้องพึ่งพา JavaScript มากนัก

อัปเดตสิงหาคม 2019

โซลูชัน # 3

เป็นอีกทางเลือกหนึ่งที่เราสามารถใช้ได้ <embed>

สำหรับFirefox ดูเหมือนว่าการเล่นเสียงอัตโนมัติกำลังทำงานอยู่ดังนั้นเราจึงไม่จำเป็นต้องใช้<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>

ใช้งานได้ในภายหลัง

Chrome แจ้งว่ามีการเล่นเสียงและให้สิทธิ์ในการเล่นอัตโนมัติในแท็กเสียง

Question 4

ในเดือนเมษายน 2018 นโยบายการเล่นอัตโนมัติของ Chrome มีการเปลี่ยนแปลง:

"นโยบายการเล่นอัตโนมัติของ Chrome นั้นเรียบง่าย:

อนุญาตให้เล่นอัตโนมัติแบบปิดเสียงเสมอ

อนุญาตให้เล่นอัตโนมัติพร้อมเสียงหาก:

ผู้ใช้มีปฏิสัมพันธ์กับโดเมน (คลิกแตะ ฯลฯ )
บนเดสก์ท็อปขีด จำกัด Media Engagement Index ของผู้ใช้ถูกข้ามไปซึ่งหมายความว่าผู้ใช้เคยเล่นวิดีโอพร้อมเสียงมาก่อน
บนอุปกรณ์เคลื่อนที่ผู้ใช้ได้เพิ่มไซต์ลงในหน้าจอหลักของตนเอง

นอกจากนี้

เฟรมด้านบนสามารถมอบสิทธิ์การเล่นอัตโนมัติให้กับ iframe เพื่ออนุญาตให้เล่นอัตโนมัติพร้อมเสียง "

ไซต์สำหรับนักพัฒนาซอฟต์แวร์ของ 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

เบราว์เซอร์ได้เปลี่ยนความเป็นส่วนตัวเป็นการเล่นวิดีโอหรือเสียงอัตโนมัติเนื่องจากโฆษณาที่น่ารำคาญ คุณสามารถหลอกล่อด้วยโค้ดด้านล่าง

คุณสามารถใส่เสียงเงียบลงใน 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>

เพียงเพิ่ม iframe ที่มองไม่เห็นโดยมี. mp3 เป็นแหล่งที่มาและอนุญาตให้ = "เล่นอัตโนมัติ" ก่อนองค์ประกอบเสียง เป็นผลให้เบราว์เซอร์ถูกหลอกให้เริ่มไฟล์เสียงที่ตามมา หรือเล่นวิดีโออัตโนมัติที่ไม่ได้ปิดเสียง

Question 8

คุณสามารถใช้ (.autoplay = true;) ดังต่อไปนี้ (ทดสอบบน Chrome Desktop):

<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 ครั้งควรทำเคล็ดลับ) เสียงจะเล่นอัตโนมัติจากนั้นจะเล่นสองสามครั้งเมื่อมีการรีเฟรชซิกเกิลเพียงเพื่อกลับไปสู่หนทางที่ชั่วร้าย สุดยอด!

ในประกาศจาก Google ระบุว่าสำหรับไฟล์สื่อที่จะเล่น "โดยอัตโนมัติ" จะต้องมีการโต้ตอบระหว่างผู้ใช้และไซต์ ดังนั้น "วิธีแก้ปัญหา" ที่ดีที่สุดที่ฉันได้จัดการมาจนถึงตอนนี้คือการเพิ่มปุ่มเพื่อแสดงการเล่นไฟล์ที่น้อยกว่าอัตโนมัติ แต่มีเสถียรภาพ / เชื่อถือได้มากกว่ามาก

Question 10

ฉันใช้ pixi.js และ pixi-sound.js เพื่อให้เล่นอัตโนมัติใน chrome และ firefox

<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 และทั้งหมดทำงานได้ดีใน Chrome

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

Question 14

Google เปลี่ยนนโยบายเมื่อเดือนที่แล้วเกี่ยวกับการเล่นอัตโนมัติใน Chrome โปรดดูประกาศนี้

อย่างไรก็ตามพวกเขาอนุญาตให้เล่นอัตโนมัติหากคุณกำลังฝังวิดีโอและปิดเสียงอยู่ คุณสามารถเพิ่ม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 หรือ javascript:

<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>

ด้วยวิธีนี้จะหลีกเลี่ยงกล่องโต้ตอบเปิด / บันทึกของ Internet Explorer

   <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

audioแอตทริบิวต์เล่นอัตโนมัติHTML5 เริ่มต้นไม่ทำงานใน Chrome แต่คุณบังคับให้เล่นเสียงอัตโนมัติโดยใช้ JavaScript ได้ ลองสิ่งนี้:

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

สิ่งนี้ใช้ได้กับฉัน