首页 > 解决方案 > 在 jQuery 中自动播放音频

问题描述

当我收到 ajax 响应时,我正在尝试根据条件自动播放音频。我收到response.code == 1来自我的 ajax 调用,但它不播放音频。

<audio id="myAudio" >
  <source src="{{asset('Dashboard/alarm.mp3')}}" type="audio/mpeg">
</audio> 
$.ajax({
  url: '{{url('/')}}',
  type: 'POST',
  data: {
    _token: _token
  },
  dataType: 'json',
  success: function(response) {
    if (response.code == 1) {
      playAudio();
    }
  }
});

function playAudio() {
  var x = document.getElementById("myAudio");
  x.play();
}

标签: javascriptjqueryajax

解决方案


浏览器通常会阻止不是由用户交互触发的声音,您可以在鼠标移动时开始播放音频,例如:

let isAjaxLoaded = false;

$(document).mousemove(function(){
  if (isAjaxLoaded) {
    playAudio();
  }
});

$.ajax({
  url: '{{url('/')}}',
  type: 'POST',
  data: {
    _token: _token
  },
  dataType: 'json',
  success: function(response) {
    if (response.code == 1) {
      isAjaxLoaded = true;
    }
  }
});

function playAudio() {
  var x = document.getElementById("myAudio");
  x.play();
}

推荐阅读