1. 首頁
  2. 問答
  3. HTML 5/QuickTime的音頻緩存在Safari瀏覽器在iOS

HTML 5/QuickTime的音頻緩存在Safari瀏覽器在iOS

2011-07-25 39 views
15

我desperatly試圖找到有關於在iOS，Safari瀏覽器上運行的Web應用程序（如iPad上，iPad2和iPhone 4）的解決方案：HTML 5/QuickTime的音頻緩存在Safari瀏覽器在iOS

這是我前段時間寫的一個網絡應用程序，它允許用戶搜索並收聽簡短的音樂樣本（MP3，全部從〜100 kB到〜1.5 MB）。音頻播放器是基於Flash的，因此目前它不適用於iOS設備，我必須在HTML 5或「直接」QuickTime對象中實施替代方案。

我的兩個HTML 5和QuickTime的替代品用於iOS設備工作正常，到目前爲止，但有一個主要的問題，我不能找到一個解決方案：

與Flash和HTML最多5兼容的瀏覽器上我的iPad 2上的Windows Safari在加載並播放它們時不會將audiofiles存儲在browsercache中 - 既不支持HTML 5音頻標籤也不支持QuickTime-Object。每次我從服務器加載音頻文件進行播放時（使用JavaScript命令，所以不需要更改或重新加載整個頁面），它會再次完全下載。

如果用戶收聽樣本A然後收聽樣本B，則Safari忘記了已經播放樣本A並且如果我想再次收聽整個MP3，請再次下載整個MP3。在具有潛在窄帶的移動設備上，這種行爲是不可能的。

是否有存儲由HTML 5或QuickTime在Safari的高速緩存來打開下載的語音文件，因此記得已經有下載了他們的一種方式 - 就像它緩存通常的「網絡文件」像HTML，CSS或JPEG圖像，或像Flash將這些對象存儲在本地緩存中？

我的第一次嘗試是試圖使用應用程序緩存與清單文件 - 雖然這不是我的應用程序的預期目的...我沒有一組靜態文件，我想要緩存或「離線可用」 - 我只想緩存用戶已播放的MP3。

應該可以使用「動態清單」：一個由Apache的PHP模塊解析並列出文件從PHP會議上打了那麼遠 - 這樣的事情：

session_start(); 

header("Content-Type: text/cache-manifest, charset=UTF-8"); 
echo "CACHE MANIFEST\n"; 
foreach($_SESSION['playedSongs'] as $song) 
{ 
     echo $song."\n"; 
}

所以每當一首歌曲被加載/播放，我可以通過AJAX訪問PHP會話，插入播放文件的文件名並通過調用window.applicationCache.update（）或.swapCache（）手動更新清單。

有兩個問題：

首先：它不起作用。我甚至沒有去試圖用一個動態清單點：

<!DOCTYPE html> 
<html manifest="cache.manifest"> 
    <head> 
     <title>Test</title> 
     <script type="text/javascript"> 

     function playStuff(id) 
     { 
      if(id == 1) 
      { 
       window.document.getElementById("audio").innerHTML = '<audio controls preload="automatic" autobuffer><source src="song01.mp3" type="audio/mp3" /></audio>'; 
      } 

      else if(id == 2) 
      { 
       window.document.getElementById("audio").innerHTML = '<audio controls preload="automatic" autobuffer><source src="song02.mp3" type="audio/mp3" /></audio>'; 
      } 
     } 
     </script> 
    </head> 

    <body> 
     <div id="audio"></div><br /> 
     <br /> 
     <input type="button" value="playStuff(1)" onclick="playStuff(1)" /> 
     <input type="button" value="playStuff(2)" onclick="playStuff(2)" /> 
    </body> 

</html>

的cache.manifest看起來是這樣的：

CACHE MANIFEST 

song01.mp3 
song02.mp3

，並正確地從Apache的返回爲「文本/緩存清單「通過將

AddType text/cache-manifest manifest

添加到此目錄的.htaccess。

的Apache的日誌清楚地表明，Safari瀏覽器（分別爲「AppleCoreMedia」）不關心應用程序緩存，當涉及到音頻文件：

Safari瀏覽器本身似乎承認清單，事實上預裝文件：

192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/index2.html HTTP/1.1" 200 2619 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5" 

192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/cache.manifest HTTP/1.1" 200 79 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5" 

192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/cache.manifest?%3E HTTP/1.1" 200 79 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5" 

192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/song02.mp3 HTTP/1.1" 200 120525 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5" 

192.168.0.40 - - [23/Jul/2011:12:45:46 +0200] "GET /websql/song01.mp3 HTTP/1.1" 200 120525 "-" "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; de-de) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"

到目前爲止，我什麼也沒做，只是在Safari中打開我的測試應用程序。

播放song01.mp3：

192.168.0.40 - - [23/Jul/2011:12:47:25 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 2 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:47:25 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:47:25 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:47:25 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:47:25 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:47:29 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:47:29 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

播放song2.mp3：

192.168.0.40 - - [23/Jul/2011:12:48:04 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 2 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:48:04 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:48:04 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:48:04 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:48:04 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:48:05 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:48:05 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

再次播放song1.mp3：

192.168.0.40 - - [23/Jul/2011:12:48:38 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:48:38 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:48:38 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:48:38 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:48:38 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:48:40 +0200] "GET /websql/song01.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:48:40 +0200] "GET /websql/song01.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

播放song2.mp3再次：

192.168.0.40 - - [23/Jul/2011:12:49:12 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:49:12 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:49:12 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:49:12 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:49:12 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:49:13 +0200] "GET /websql/song02.mp3 HTTP/1.1" 304 - "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)" 

192.168.0.40 - - [23/Jul/2011:12:49:13 +0200] "GET /websql/song02.mp3 HTTP/1.1" 206 120525 "-" "AppleCoreMedia/1.0.0.8J2 (iPad; U; CPU OS 4_3_3 like Mac OS X; de_de)"

每個文件在播放時都會再次完全下載。因此，「AppleCoreMedia」（無論這可能是什麼，我認爲由HTML 5音頻元素觸發的QuickTime插件）無論是無法訪問應用程序緩存還是僅僅無法實現其中的文件。因此，如果我現在將iPad切換到「飛行模式」，Safari無法訪問/加載/播放這些文件。

我也嘗試使用QuickTime的對象，而不是一個HTML 5音頻標籤的（據我所知HTML 5音頻和視頻在Safari總是使用QuickTime？），並與像控制它：

document.movie1.SetURL('song02.mp3');

沒有什麼變化，就像使用HTML 5音頻一樣，加載/播放時再次下載所有內容。

而且，即使這會在那裏工作還是會出現一個問題：

正確實現，我將不得不玩它之前加載應用程序緩存中的MP3文件。當這樣做時，似乎不可能顯示「真實」進度：更新後從應用程序緩存中觸發的ProgressEvent似乎沒有提供關於迄今爲止加載的數據的任何信息以及文件的完整大小。這只是「文件1從2」等等，而不是「真正的」進度，我可以確定如下所示：「100 kB的1.2 MB加載」，就像我可以使用音頻元素一樣。

所有其他類似的Web SQL/Web數據庫或本地存儲存儲方法是沒有幫助或者：

我沒有看到獲取MP3數據到本地存儲或網絡數據庫和/或獲取的任何方式它再次發揮它。 HTML 5 Canvas元素有一個toDataURL（）函數來生成一個Base64編碼表示並將其用於存儲 - Audio元素似乎沒有這樣的東西。

我最後一個真正「髒」的方法是嘗試使用AJAX和PHP的組合手動加載Base64編碼的MP3：PHP腳本輸出一個MP3文件的Base64表示，並通過AJAX加載，所以我可以存儲Base64表示，例如作爲本地存儲或在Web數據庫中：

$infile = 'song01.mp3'; 
$contents = file_get_contents($infile); 
$base64 = base64_encode($contents); 
$audio = 'data:audio/mp3;base64,'.$base64; 
echo $audio;

我嘗試使用生成的AJAX responseText作爲音頻源標記中的source-argument。驚喜：它在我的iPad 2上無法在Safari上運行，播放器無法加載「文件」，雖然在Windows上的Chrome中運行良好。可能是Safari/iOS上Base64-URI的大小限制？

並再次：即使這是在的iOS/Safari瀏覽器的工作，我不知道的方式來確定從AJAX查詢一個真正的進步......

我想的最後一件事是不在加載歌曲時替換音頻或源標籤，但將它們留在DOM結構中時，檢查歌曲加載時是否已經存在，如果尚未加載歌曲，只需添加新的音頻標籤。不起作用... 如果您動態添加多個播放器實例（無論是否使用HTML 5標籤或QuickTime對象）而不是「覆蓋」它們，Safari會盡快爲您加載第一個MP3甚至可以在DOM樹中插入新的音頻或QuickTime元素 - 甚至不需要在新實例中加載/播放內容！只要不播放或插入其他任何與音頻/媒體相關的內容，只要不重新播放文件即可重複播放。順便說一句：在JavaScript中使用Audio-objects並將它們「保存」到數組中不起作用，或者不會使Safari緩存任何內容。

這會產生大量不必要的流量，並且如果您處於低帶寬的蜂窩網絡中，則會花費不必要的很長時間！

我這個問題，現在工作了三天，甚至沒有來接近解決方案...

任何想法？

來源

2011-07-25 cpw

+2

+1呈現:)我重新標記它在iPhone上，因爲它不是具體的iPad和iPhone的標籤被越來越多的人認購。 – Kay

+0

也許這包含一些有趣的鏈接和信息http://stackoverflow.com/questions/1612116/html5-local-storage-of-audio-element-source-is-it-possible – Kay

+0

肯定一些有趣的花絮在那一個凱，但沒有IOS問題的答案。 –

回答

2

我幾乎可以肯定，這是由設計，不能被重寫; CoreMedia會根據需要有目的地流式傳輸文件，並在播放器被解僱時將其拋棄而不緩存。這是由於存儲空間有限，電池使用時間長等原因造成的，因爲絕大多數情況下，您只需載入一個媒體文件，然後多次播放，然後擺脫它。只要內容類型是媒體類型，就會發生。

另一篇文章引用了對PNG中的數據進行編碼以使瀏覽器緩存它的想法，但我沒有嘗試過。

您可能會嘗試將各種音頻樣本合併到一個文件中，然後傳輸每個樣本的開始/停止時間（基本上是一個索引）。那麼你可以在一個音頻播放器中加載文件並跳到必要的位置並在指定的時間播放。如果該位置尚未下載，我相信Safari會使用範圍標題在文件中向前跳轉（但可以根據容器的類型以及容器是否有索引）。

另一種選擇是使用可動態播放音頻的流媒體服務器。只需讓玩家參與流式播放但流式播放靜音（正確的協議應該使用最小的帶寬播放這種情況），然後請求一個示例觸發流媒體服務器播放該示例。不幸的是不理想或非常高效。

來源

2011-09-01 20:32:17 russbishop

0

嘗試這個技巧我幾周前在Twitter上看到過，但實際上沒有時間嘗試：添加一個iframe，並將源設置爲媒體文件URL。這聽起來很奇怪，但它來自一個非常流行的JS傢伙鳴叫...

哦，我看到它在這裏：How can I autoplay media in iOS >= 4.2.1 Mobile Safari?

防守值得一試

來源

2011-09-07 13:52:12 standup75

1

如果有人還在外面拉着自己的頭髮在這個東西（我最近失去了一個週末的話），Safari瀏覽器在iOS 6有一個Web Audio API。

https://developer.apple.com/technologies/ios6/

來源

2012-06-23 05:53:41

+0

你不應該公開討論iOS的beta版本功能。 – Till

+0

爲什麼不能？它是Apple.com上的公共信息：「iOS 6上Safari的新功能可讓您使用Web Audio API爲交互式Web應用程序創建音頻」。這是一個好消息，我實際上是用HTML 5製作兒童遊戲，而且我在遇到落後的聲音時遇到了麻煩。 – SondreB

相關問題

 相關問題