html5的audio，audio.play()在手机浏览器中不能自动播放

Posted 2023-04-06

这个你解决了吗？

参考技术A 1：这个是已知的bug,尤其是在苹果的手机上。android手机上可以。
2：无法避免，必须要手工点击后，方可以开始播放。
3：苹果据说不准备对这个进行更改。追问

国产手机基本都行，试过。
易启秀上面的，微场景，在iPhone上都能自动播放音乐的

IOS 10 mobile audio.play() 工作不稳定

【中文标题】IOS 10 mobile audio.play() 工作不稳定

【英文标题】：IOS 10 mobile audio.play() work unstable

【发布时间】：2017-09-07 09:40:58

【问题描述】：

这是我的代码：

$(document).on('click', 'div.play',function () 
play = $(this);
var stop = $('.stop');
contentId = play.attr('id');
nexttrack = nexttrackPlay(play);

if(!play.parent().hasClass('stop')) 
  if(song ==undefined)
    initAudio(play);
  
  else
  
    song.src = play.attr('audiourl');
    song.load();
  

  playerInit(play);
  stop.each(function () 
    $(this).removeClass('stop');
  );

  playAudio();

else
  if(song.paused)
    playAudio();
  
  else
    stopAudio();
  



 );

function initAudio(elem) 
var url = elem.attr('audiourl');
song = document.getElementsByTagName('audio')[0];
console.log(song);
song.src = url;
song.preload = 'metadata';
song.load();
    song.addEventListener('play', function () 
  $('.play-play').addClass('stop');
  play.parent().addClass('stop');
  play.removeClass('pause');
  $('.button-play').addClass('stop');
      song.removeEventListener('play',function()  );
,false);

song.addEventListener('pause', function () 
  play.addClass('pause');
  $('.play-play').removeClass('stop');
  $('.button-play').removeClass('stop');
  song.removeEventListener('play',function()  );
,false);



  function playAudio() 
    song.load();
  song.play();
  
  function stopAudio() 
    song.pause();
  

在 Android 和桌面上完美运行，但在 IOS 上第一次点击不起作用，当点击另一首歌曲然后再次开始播放时。

【问题讨论】：

我们需要的远不止这些

【参考方案1】：

我发现了问题和解决方案） 一切都在标头中，我发送了带有 Content-type:application/octet-stream 的标头，这对 IOS 来说是个问题，然后我将其更改为音频/mpeg 并开始加载音频。