tự động phát âm thanh cũng hoạt động trong Mozilla, Microsoft edge và google chrome cũ nhưng không hoạt động trong google chrome mới. họ đã chặn tự động phát. có cách nào để làm cho nó tự động phát âm thanh trong google chrome không?

Giải pháp số 1

Giải pháp của tôi ở đây là tạo một iframe

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

và audiogắn thẻ cũng cho các trình duyệt không phải chrome

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

và trong tôi 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 
  }

Giải pháp # 2:

Cũng có một giải pháp khác cho điều này theo @Leonard

Tạo một iframetrò chơi không phát bất cứ thứ gì chỉ để kích hoạt tự động phát trong lần tải đầu tiên.

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

nguồn tốt cho tệp mp3 im lặng.mp3

Sau đó, phát tệp âm thanh thực của bạn một cách thoải mái.

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

Cá nhân tôi thích giải pháp số 2 hơn vì nó là cách tiếp cận rõ ràng hơn vì không phụ thuộc quá nhiều vào JavaScript.

Cập nhật tháng 8 năm 2019

Giải pháp # 3

Để thay thế, chúng tôi có thể sử dụng <embed>

Đối với Firefox Có vẻ như tính năng tự động phát âm thanh đang hoạt động nên chúng ta không cần <embed>phần tử vì nó sẽ tạo ra âm thanh kép đang chạy.

// 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.
}

Ngoài ra, nếu bạn có sự kiện chuyển đổi cho âm thanh của mình, hãy đảm bảo xóa <embed>phần tử đã tạo cho âm thanh.

Lưu ý: Sau khi chuyển đổi của bạn, nó sẽ khởi động lại từ đầu vì phần tử <embed>đã bị xóa và <audio>phần tử sẽ phát như bình thường bây giờ.

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

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

Và bây giờ hãy đảm bảo ẩn các phần tử này <audio>và<embed>

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

Lưu ý: diplay: nonevà visibility: hiddensẽ làm cho <embed>phần tử không hoạt động.

Có một thủ thuật thực sự hữu ích để sử dụng chức năng tự động phát của thẻ âm thanh trong chrome.

Thêm vào

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

trong khi silence.mp3chỉ là 0,5 giây im lặng.

Điều này

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

hoạt động sau đó.

Chrome nhận thấy rằng âm thanh đã được phát và cấp quyền tự động phát trong thẻ âm thanh.

Kể từ tháng 4 năm 2018, chính sách tự động phát của Chrome đã thay đổi:

"Chính sách tự động phát của Chrome rất đơn giản:

• Tự động phát bị tắt tiếng luôn được phép.

Tự động phát có âm thanh được phép nếu:

• Người dùng đã tương tác với miền (nhấp, nhấn, v.v.).
• Trên máy tính để bàn, ngưỡng Chỉ số tương tác truyền thông của người dùng đã bị vượt qua, có nghĩa là trước đó người dùng đã phát video có âm thanh.
• Trên thiết bị di động, người dùng đã thêm trang web vào màn hình chính của họ.

Cũng thế

• Các khung trên cùng có thể ủy quyền quyền tự động phát cho iframe của chúng để cho phép tự động phát có âm thanh. "

Trang web dành cho nhà phát triển của Chrome có thêm thông tin, bao gồm một số ví dụ lập trình, bạn có thể tìm thấy tại đây: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Chỉ cần thêm tập lệnh nhỏ này như được mô tả trong https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

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

Hơn điều này sẽ hoạt động như bạn muốn:

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

Ít nhất bạn có thể sử dụng cái này:

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

Nhạc bắt đầu khi người dùng nhấp vào bất kỳ đâu trên trang.

Nó cũng xóa ngay EventListener, vì vậy nếu bạn sử dụng các điều khiển âm thanh, người dùng có thể tắt tiếng hoặc tạm dừng nó và nhạc không bắt đầu lại khi anh ta nhấp vào một nơi khác ..

Các trình duyệt đã thay đổi quyền riêng tư của họ thành video hoặc âm thanh tự động phát do Quảng cáo gây khó chịu. Vì vậy, bạn chỉ có thể lừa với mã dưới đây.

Bạn có thể đặt bất kỳ âm thanh im lặng nào vào 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>

Chỉ cần thêm iframe ẩn với .mp3 làm nguồn của nó và allow = "autoplay" trước phần tử âm thanh. Kết quả là trình duyệt bị lừa bắt đầu bất kỳ tệp âm thanh nào tiếp theo. Hoặc tự động phát video không bị tắt tiếng.

Bạn có thể chỉ cần sử dụng (.autoplay = true;) như sau (được thử nghiệm trên Chrome Desktop):

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

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

Nếu bạn cần thêm các nút dừng / phát:

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

Nếu bạn muốn dừng / phát chỉ là một nút:

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

Nếu bạn muốn hiển thị dừng / phát trên cùng một nút:

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

Trong một số trình duyệt, âm thanh có thể không hoạt động chính xác, vì vậy, hãy thử thêm iframe trước mã của bạn:

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

Hôm nay tôi đã bỏ qua điều này và tôi chỉ muốn thêm một chút tò mò mà tôi đã khám phá ra vào cuộc thảo luận.

Dù sao thì, tôi đã bỏ qua điều này:

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

Điều này:

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

Và cuối cùng đây, một "giải pháp" hơi vượt quá giới hạn nếu bạn chỉ muốn tạo ra thứ của riêng bạn (mà chúng tôi làm):

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

Khám phá mà tôi đã thực hiện và cũng là phần thực sự hài hước (kỳ lạ? Kỳ cục? Nực cười?) Là trong trường hợp của hai điều trước, bạn thực sự có thể đánh bại hệ thống bằng cách cho f5 một cú đập thích hợp; nếu bạn nhấn làm mới một cách rất nhanh (khoảng 5-10 lần nên thực hiện thủ thuật này), âm thanh sẽ tự động phát và sau đó nó sẽ phát một vài lần sau khi làm mới một cách đáng kể chỉ để trở lại theo cách xấu. Tuyệt diệu!

Trong thông báo từ Google, nó nói rằng để các tệp phương tiện phát "tự động", phải có sự tương tác giữa người dùng và trang web. Vì vậy, "giải pháp" tốt nhất mà tôi đã tìm ra cho đến nay là thêm một nút, hiển thị việc phát các tệp ít hơn tự động, nhưng ổn định / đáng tin cậy hơn rất nhiều.

tôi đã sử dụng pixi.js và pixi-sound.js để đạt được tự động phát trong chrome và 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>

nó cũng hoạt động trên thiết bị di động nhưng người dùng phải chạm vào một nơi nào đó trên màn hình để kích hoạt âm thanh.

Sử dụng iframethay thế:

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

sửa chữa tạm thời

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

Hoặc sử dụng trình phát tùy chỉnh để kích hoạt phát http://zohararad.github.io/audio5js/

Lưu ý: Tự động phát sẽ được bật lại vào ngày 31 tháng 12

Tôi thêm thuộc tính điều khiển cũng như thẻ âm thanh và chỉ cần ẩn nó trong CSS. Và tất cả đều hoạt động tốt trong Chrome.

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

Google đã thay đổi chính sách của họ vào tháng trước về tính năng tự động phát trong Chrome. Vui lòng xem thông báo này .

Tuy nhiên, chúng cho phép tự động phát nếu bạn đang nhúng video và video đó bị tắt tiếng. Bạn có thể thêm thuộc mutedtính và thuộc tính này sẽ cho phép video bắt đầu phát.

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

Giải pháp không sử dụng iframe hoặc 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>

Với giải pháp này, hộp thoại mở / lưu của Internet Explorer cũng tránh được.

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

Thẻ video cũng có thể phát âm thanh. Do thẻ âm thanh dường như không hoạt động như bình thường, bạn chỉ có thể sử dụng thẻ video cho âm thanh:

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

Bạn có thể sử dụng <iframe src="link/to/file.mp3" allow="autoplay">, nếu nguồn gốc có quyền tự động phát. Thông tin thêm ở đây .

audioThuộc tính tự động phát HTML5 mặc định không hoạt động trong chrome, nhưng bạn có thể buộc tự động phát âm thanh bằng JavaScript. Thử đi:

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

Điều này làm việc cho tôi.