使用HTML5在iPad上自動播放音頻文件

32

更新：這是一個黑客攻擊，它不再適用於iOS 4.X及以上版本。這一個在IOS 3.2.X上工作。

這是不正確的。 Apple不想在iPad上自動播放視頻和音頻，因爲您可以在移動網絡上使用大量流量。我不會使用自動播放在線內容。對於離線HTML網站這是一個很棒的功能，那就是我用它的。

這裏是一個「假的JavaScript點擊」解決方案：http://www.roblaplaca.com/examples/html5AutoPlay/

複製&從網站上粘貼代碼：

<script type="text/javascript"> 
     function fakeClick(fn) { 
      var $a = $('<a href="#" id="fakeClick"></a>'); 
       $a.bind("click", function(e) { 
        e.preventDefault(); 
        fn(); 
       }); 

      $("body").append($a); 

      var evt, 
       el = $("#fakeClick").get(0); 

      if (document.createEvent) { 
       evt = document.createEvent("MouseEvents"); 
       if (evt.initMouseEvent) { 
        evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); 
        el.dispatchEvent(evt); 
       } 
      } 

      $(el).remove(); 
     } 

     $(function() { 
      var video = $("#someVideo").get(0); 

      fakeClick(function() { 
       video.play(); 
      }); 
     }); 

     </script>

這不是我的源。我前段時間發現了這個問題，並使用IOS 3.2.X在IPad和iPhone上測試了代碼。

來源

2010-06-16 18:44:21 Fa11enAngel

+1

這是另一個解決方法：http：//www.codeblog。co/getting-autoplay-working-on-ios /我剛剛證實，這適用於使用iOS 3.2的iPad。 – Ciryon 2010-09-08 08:19:59

+44

不要浪費你的時間，因爲它不再適用於iOS 4 + – jcampbell1 2011-06-20 19:54:38

+0

@Ciryon你的鏈接是狡猾的：/ – w0ns88 2017-06-29 07:46:47

5

對於視頻或音頻標籤，自動播放功能無法在iPad或iPhone上使用。這是Apple爲了節省用戶帶寬而制定的限制。

來源

2010-06-10 20:37:46 Andrew

7

嘗試在音頻或視頻標籤上的.play（）方法之前調用.load（）方法...將分別爲HTMLAudioElement或HTMLVideoElement。這是它爲我工作在iPad上的唯一方式！

來源

2010-06-22 23:27:57

+0

@joeynelson：你能解釋這是如何工作的 – Hitesh 2013-12-05 22:31:13

+0

我這樣做，但這不適用於我。 – MastaBaba 2016-01-24 21:02:17

+0

根據蘋果開發者文檔，除了被用戶觸發之外，.load和play都不會起作用。 – 2016-05-10 23:11:20

0

這似乎工作：

<html> 
<title> 
iPad Sound Test - Auto Play 
</title> 
</head> 
<body> 
<audio id="audio" src="mp3test.mp3" controls="controls" loop="loop"> 
</audio> 
<script type="text/javascript"> 
    window.onload = function() { 
     var audioPlayer = document.getElementById("audio"); 
     audioPlayer.load(); 
     audioPlayer.play(); 
    }; 
    </script> 

</body> 
</html>

看到它在這裏的行動：http://www.johncoles.co.uk/ipad/test/1.html (Archived)

隨着iOS 4.2的這個不再視爲作品。抱歉。

來源

2010-09-10 19:02:47

+0

@NisseEngström對我來說，mp3文件還沒有歸檔，所以這個歸檔鏈接編輯是相當實際的。 – FrankerZ 2017-07-17 04:03:52

+0

@FrankerZ：有一個MP3鏈接？我錯過了。謝謝。 – 2017-07-17 04:12:11

23

從iOS 4.2.1開始，虛假點擊和.load（）技巧都無法在任何iOS設備上自動播放音頻。我知道的唯一選擇是讓用戶實際執行點擊操作並在點擊事件處理程序中開始播放，而不用以任何異步方式（ajax，setTimeout等）包裝.play（）調用。

有人請告訴我，如果我錯了。在最近的更新之前，我對iPad和iPhone都有工作漏洞，並且他們看起來都已經關閉了。

來源

2010-11-23 19:13:05

+5

我可以驗證我的代碼是否可以在4.2.1之前的iPad和iPod touch上自動播放音頻，而無需用戶干預。今天我剛把iPad更新到了4.2.1版本（正好在測試我的音頻預加載器的過程中），並且驚恐地看着它停止工作。 – 2010-12-01 15:44:41

+2

在4.2.1上'

+1

在用戶交互*每個媒體元素*後，媒體（音頻和視頻）元素的編程控制似乎被啓用。即如果您有音頻元素A和B，並且您通過點擊（或觸摸）事件處理程序範圍內的代碼開始播放A，它就可以工作。但是，這並不意味着您可以稍後開始播放B以外的單擊事件處理程序。將iOS中的媒體元素作爲單例處理，並在一個實例中交換源，而不是將源實例數相乘。 – 2011-12-31 18:55:31

2

在開發iOS4.2（開發版本）下的快速原型Web應用程序時，對此感到困惑。解決方案其實很簡單。請注意，您似乎無法已有的標籤在HTML頁面中，你實際上需要動態插入標籤到文檔（注意這個例子中使用Prototype 1.7一些額外的Javascript snazziness）：

this.soundFile = new Element("audio", {id: "audio-1", src: "audio-1.mp3", controls: ""}); 
document.body.appendChild(this.soundFile); 
this.soundFile.load(); 
this.soundFile.play();

由於你還沒有設置一個控制器，不應該有任何需要用CSS做任何棘手的事情來隱藏它/將它放置在屏幕外。

這似乎很好地工作。

來源

2010-12-03 15:20:22

+0

剛剛嘗試過，沒有運氣。任何更新？ – CoolAJ86 2011-02-05 09:05:05

1

，如果您使用的音頻元素：

var a = new Audio("my_audio_file.wav");

，並通過添加suspend事件偵聽器：

a.addEventListener("suspend", function() {console.log('suspended')}, false);

，然後將文件加載到移動Safari瀏覽器（iPad或iPhone），你」會看到'暫停'會在開發者控制檯中登錄。根據HTML5規範，這意味着「用戶代理有意不當前獲取媒體數據，但沒有下載整個媒體資源。」

調用後續的a.load（），測試「canplay」事件，然後使用a.play（）看起來像是一種自動觸發聲音的合適方法。

來源

2011-01-02 21:30:56 Vince

+0

我試過這個，但它似乎沒有工作。任何更新？ http://sandbox.coolaj86.info/html5-audio-tag-ios4.html – CoolAJ86 2011-02-05 09:11:35

98

我還想強調一下，你做不到這個的原因是蘋果做出的一個商業決定，而不是技術決定。換句話說，Apple沒有合理的技術理由來禁用iPod Touch上的網絡應用程序的聲音。這僅僅是一個WiFi設備，而不是可能導致昂貴的帶寬費用的電話，所以該論點對於該設備沒有價值。他們可能會說他們正在幫助進行WiFi網絡管理，但我的WiFi網絡帶寬問題是我關心的問題，而不是Apple的問題。另外，如果他們真正關心的是防止不必要的過度帶寬消耗，他們會提供一個設置，允許用戶選擇加入Web應用程序的聲音。此外，他們會採取其他措施來限制網站消耗等效帶寬。但是沒有這樣的限制。一個網站可以一遍又一遍地在後臺下載大文件，蘋果公司可以不關心這一點。最後，我相信這些聲音可以下載，所以沒有任何帶寬被實際保存！如果沒有用戶交互，蘋果不允許他們自動播放，使他們無法用於遊戲，這當然是他們的真正意圖。

蘋果屏蔽了聲音，因爲他們開始注意到HTML5應用程序可以像原生應用程序一樣有能力，如果不是更多的話。如果你想在Web應用程序中播放聲音，你需要遊說蘋果停止像微軟那樣的反競爭。沒有技術問題可以在這裏解決。

來源

2011-02-04 22:18:15

+0

這對Android來說不一樣嗎？ – 2016-09-18 18:31:05

+1

@Rune Jeppesen號我有一個PhoneGap/Cordova應用程序，它有一個音頻播放器，它在Android上完美運行。我在StackOverflow中達到此主題的唯一原因是iOS對音頻播放的限制。 – 2017-11-14 00:07:48

2

Apple完全不支持該標準，但有一種解決方法。他們的justification是蜂窩網絡擁塞，也許是因爲你會登陸播放隨機音頻的頁面。當設備連接到無線網絡時，這種行爲不會改變，可能是爲了保持一致。順便說一下，無論如何，這些頁面通常是一個壞主意。您不應該試圖在每個網頁上放置音軌。這是錯誤的。 :)

如果由於用戶操作而啓動html5音頻，它將播放。加載一個頁面不算。所以你需要重構你的網絡應用程序，成爲一個全能的頁面應用程序。除了打開播放音頻的頁面的鏈接之外，您需要該鏈接才能在當前頁面上播放，而無需更換頁面。這個「用戶交互」規則適用於您可以在音頻或視頻元素上調用的html5方法。如果這些調用在頁面加載時自動觸發，則這些調用不會產生任何影響，但是在從事件處理程序調用時它們會工作。

來源

2011-10-12 16:30:14 bmidgley

1

我的解決方案是從事先菜單中的真實觸摸事件觸發的。當然，他們不會強迫你使用特定的播放器界面。爲了我的目的，這很好。如果你沒有一個現有的界面來使用，afaik你會發瘋。也許你可以嘗試傾斜事件或什麼...

來源

2011-10-14 21:51:24

8

我確認音頻不像描述的那樣工作（至少在運行4.3.5的iPad上）。具體問題是音頻不會在異步方法（ajax，timer event等）中加載，但它會在預加載時播放。問題是負載必須在用戶觸發的事件上。所以，如果你能有一個按鈕爲用戶啓動播放，你可以這樣做：

function initSounds() { 
    window.sounds = new Object(); 
    var sound = new Audio('assets/sounds/clap.mp3'); 
    sound.load(); 
    window.sounds['clap.mp3'] = sound; 
}

然後在一個Ajax請求玩的話，比如，你可以做

function doSomething() { 
    $.post('testReply.php',function(data){ 
     window.sounds['clap.mp3'].play(); 
    }); 
}

不是最好的解決方案，但它可能會有所幫助，特別是瞭解罪魁禍首是非用戶觸發事件中的加載功能。

編輯：我發現蘋果的解釋，它影響iOS 4+： http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

來源

2011-11-03 20:00:05

4

似乎對我來說，這個問題的答案（至少目前）明確記載在Safari HTML5 docs：

用戶通過蜂窩網絡控制下載

在iOS上的Safari（適用於所有設備，包括iPad），用戶可能位於蜂窩網絡並按每個數據單元收費時，將禁用預加載和自動播放。直到用戶啓動它纔會加載數據。這意味着，除非用戶操作觸發play（）或load（）方法，否則JavaScript play（）和load（）方法在用戶啓動播放之前也處於非活動狀態。換句話說，用戶啓動的播放按鈕可以工作，但onLoad =「play（）」事件不會。

此播放電影：<input type="button" value="Play" onClick="document.myMovie.play()">

這無助於iOS的：<body onLoad="document.myMovie.play()">

來源

2011-11-17 10:16:02 Adrian

26

蘋果煩人拒絕在其iOS設備很多HTML5網頁標準，對各種業務的原因。最終，您無法在觸摸事件之前預加載或自動播放聲音文件，它一次只播放一個聲音，並且不支持Ogg/Vorbis。不過，我確實找到了一個漂亮的解決方法，讓您對音頻有更多的控制權。

<audio id="soundHandle" style="display:none;"></audio> 

<script type="text/javascript"> 

var soundHandle = document.getElementById('soundHandle'); 

$(document).ready(function() { 
    addEventListener('touchstart', function (e) { 
     soundHandle.src = 'audio.mp3'; 
     soundHandle.loop = true; 
     soundHandle.play(); 
     soundHandle.pause(); 
    }); 
}); 

</script>

基本上，你開始在首次觸摸事件中播放音頻文件，然後立即暫停。現在，您可以在整個Javascript中使用soundHandle.play（）和soundHandle.pause（）命令，並在沒有觸摸事件的情況下控制音頻。如果你可以完美的時間，聲音結束後立即進入暫停。然後再次播放時，它會循環回到開頭。這不會解決蘋果在這裏所造成的所有混亂，但這是一個解決方案。從頁面

來源

2012-05-04 11:36:32 kaleazy

+0

我還沒有嘗試過，但如果它真的有效，這是非常棒的。 – courtsimas 2012-09-18 14:11:30

+2

感到驚訝的是，更多的人對此不感興趣。 – aoeu256 2014-10-29 19:46:42

+0

這真的很有用，謝謝！ – 2014-11-09 14:49:35

0

工程與jQuery，在iPad上V.5.1.1

$('video').get(0).play();

你必須附加測試/刪除視頻元素。

來源

2012-10-19 19:15:26 Adrian

+3

不適用於iPad 1 iOS 5.1.1 ...雖然適用於iPod 6.0和iPhone – 2012-12-16 11:52:17

0

我通過將所有允許觸發音頻的事件的事件處理程序附加到觸發任何具有自動播放功能的html音頻元素以播放一次的body元素來處理此事件。

var mobile = /iPad|iPhone|iPod|android/.test(navigator.userAgent) && !window.MSStream; 
if (mobile) { 
    $('body').on('touchstart click doubleclick keydown', function() { 
     $("audio[autoplay='autoplay']").each(
      function(){ 
       this.play(); 
       this.removeAttribute('autoplay'); 
      }); 
    }); 
}

來源

2017-05-30 16:04:42

使用HTML5在iPad上自動播放音頻文件

回答

相關問題