<audio> के लिए डेटा को सही तरीके से कैसे प्रदान करें?

मैं एचटीएमएल 5 ऑडियो पूरी तरह से .aspx पेज के लिए बाइनरी डेटा की सेवा कर रहा हूं। फ़ाइल खेला जा सकता है लेकिन सेकरबार में एक समस्या है और सफारी (आईपैड), क्रोम और फ़ायरफ़ॉक्स में फिर से चल रहा है।
संपादित करें मैंने कोड (पूर्ण रूप से बहुत ज्यादा नहीं) कोड और पूर्ण लिस्टिंग प्रस्तुत की है (पृष्ठ फ़ाइल का नाम स्पष्ट रूप से play.aspx है)।<audio> के लिए डेटा को सही तरीके से कैसे प्रदान करें?

<%@ Page Language="C#" %> 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<script runat="server"> 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     if (Request["filename"] != null) 
     { 
      string FilePath = MapPath(Request["filename"]); 
      long fSize = (new System.IO.FileInfo(FilePath)).Length; 
      //Headers 
      Response.AddHeader("Content-Length",fSize.ToString()); 
      Response.ContentType = "audio/mp3"; 
      //Data 
      Response.WriteFile(FilePath); 
      Response.End(); 
     };  
    } 
</script> 
<body> 
    <p>Direct</p> 
     <audio controls="controls" preload="none"> 
     <source src="sound.mp3" type="audio/mp3" /> 
     </audio> 
     <p>Provided</p> 
     <audio controls="controls" preload="none"> 
     <source src="play.aspx?filename=sound.mp3" type="audio/mp3" /> 
     </audio> 
</body> 
</html>

तो Content-Length और Content-Type हेडर आपूर्ति की जाती है। दो <audio> टैग जब फ़ाइल को सीधे या पूरी तरह से एक .aspx पृष्ठ तक पहुंचाया जाता है तो व्यवहार की तुलना करने में सक्षम बनाता है।

सवाल सभी आवश्यक ब्राउज़रों (एफएफ, सफारी, क्रोम, IE9 +) पर सही ढंग से <audio> टैग व्यवहार करने के लिए डेटा प्रदान करने के लिए कैसे है।

समस्याएं

सफारी (iPad): जब प्ले बटन ध्वनि खेला जाता है दबाया जाता है लेकिन वहाँ है "स्ट्रीमिंग ..." के बजाय शोध बार और खेल हमेशा के लिए लगते हैं और ध्वनि नहीं कर सकते दोबारा खेलें
फ़ायरफ़ॉक्स (विंडोज़): सीक बार प्रदर्शित होता है लेकिन अंत तक बढ़ता समय दिखाता है और फिर से चलाए जाने पर सही तरीके से व्यवहार करता है।
क्रोम (विंडोज़): बार सही खोजें लेकिन फिर से नहीं चलाया जा सकता है।
आईई 10: ठीक

मुझे इसी तरह के प्रश्न मिल गए हैं लेकिन उत्तर के बिना। फिडलर के साथ एक और पेज देखने से ऐसा लगता है कि हेडर Accept-Ranges: bytes और Content-Range: bytes 0-8100780/8100781 मदद कर सकता है। हालांकि आवश्यक सुविधाएं प्रदान करना बहुत मुश्किल लगता है, इसलिए मैंने कोशिश नहीं की।

नोट मैं How to play .m4a with HTML5 audio in IE(9+) and Safari (Pad)?

स्रोत

2013-08-20 IvanH

आपको इसके बजाय जेप्लेयर पर एक नज़र रखना चाहिए, यह आपके लिए बनाया गया है, जो ब्राउज़र के लिए फ़ॉलबैक के साथ है जो HTML5 का समर्थन नहीं करता है http://jplayer.org/ – mattytommo

@mattytommo: jplayer अच्छा है। हालांकि मुझे लगता है कि अब ब्राउज़र पर मुझे एचटीएमएल 5 ऑडियो के साथ एक ही समस्या का सामना करना पड़ेगा (स्रोत डेटा नियंत्रण द्वारा सही ढंग से स्वीकार नहीं किया जाता है)। – IvanH

सरल जवाब में अन्य जुड़े समस्या के लिए समाधान के लिए देख रहा हूँ: यह एक ब्राउज़र range request को संभालने के लिए आवश्यक है।

पूरा कहानी

जब फ़ायरफ़ॉक्स और आईआईएस के बीच Fiddler पर कब्जा कर लिया संचार की तुलना मैंने ध्यान दिया है कि सीधा लिंक के लिए प्रतिसाद स्थिति अप्रत्यक्ष लिंक 200 OK के लिए 206 Partial Content है।
अनुरोध के अधिक सावधानीपूर्वक विश्लेषण से पता चला है कि फ़ायरफ़ॉक्स Range: bytes=0- और आईपैड Range: bytes=0-1 और बाद में Range: bytes=0-fullsize (Capture Traffic from iOS Device) पर अनुरोध करता है।
Response.StatusCode = 206 सेट करना फ़ायरफ़ॉक्स को मूर्ख बनाने के लिए पर्याप्त था लेकिन सफारी नहीं। लेकिन मुझे मुख्य जानकारी पता है और बाकी सरल था। range अनुरोध को सम्मानित करना आवश्यक है: SO: HTML5 video will not loop। स्पष्टीकरण यह कैसे करें मुझे Aha! #1 – ASP.NET ASHX Video Streaming for HTML5 Video में मिला है।इसलिए नए कोड है (केवल सक्रिय रूप से भाग प्रस्तुत किया है बाकी जवाब में रूप में ही है):

protected void Page_Load(object sender, EventArgs e) 
    { 
     if (Request["filename"] != null) 
     { 
      string FilePath = MapPath(Request["filename"]); 
      long fSize = (new System.IO.FileInfo(FilePath)).Length; 
      long startbyte = 0; 
      long endbyte=fSize-1; 
      int statusCode =200; 
      if ((Request.Headers["Range"] != null)) 
      { 
       //Get the actual byte range from the range header string, and set the starting byte. 
       string[] range = Request.Headers["Range"].Split(new char[] { '=','-'}); 
       startbyte = Convert.ToInt64(range[1]); 
       if (range.Length >2 && range[2]!="") endbyte = Convert.ToInt64(range[2]); 
       //If the start byte is not equal to zero, that means the user is requesting partial content. 
       if (startbyte != 0 || endbyte != fSize - 1 || range.Length > 2 && range[2] == "") 
       {statusCode = 206;}//Set the status code of the response to 206 (Partial Content) and add a content range header.          
      } 
      long desSize = endbyte - startbyte + 1; 
      //Headers 
      Response.StatusCode = statusCode; 
      Response.ContentType = "audio/mp3"; 
      Response.AddHeader("Content-Length",desSize.ToString()); 
      Response.AddHeader("Content-Range", string.Format("bytes {0}-{1}/{2}", startbyte, endbyte , fSize)); 
      //Data 
      Response.WriteFile(FilePath,startbyte,desSize); 
      Response.End(); 
     };  
    }

यह शायद अन्य हेडर (Content-Disposition, Accept-Ranges, Access-Control-Allow-Origin) जोड़ने के लिए सुविधाजनक है, लेकिन इरादा के रूप में उपस्थित समाधान था जितना संभव हो सके सरल।

सबक लिया: मैं <audio> को तय नहीं किया था, तो कर दिया गया और <video> के लिए भी देखा था, मैं और अधिक तेजी से समाधान नहीं मिला होता।

स्रोत

2013-08-22 15:08:02 IvanH

मेरे पास ऐसी स्थिति है जहां सार्वजनिक यूआरएल के साथ फाइलों तक पहुंचा नहीं जा सकता है। आपका प्रदत्त उदाहरण काम करता है और बहुत अच्छा है। लेकिन यह ऑडियो नियंत्रक को पूरी ब्राउज़र विंडो पर ले जाने के लिए मजबूर करता है। क्या होगा यदि मैं कस्टम लेआउट के साथ किसी मौजूदा पृष्ठ में ऑडियो नियंत्रक की सेवा करना चाहता हूं और मेटाडेटा भी प्रदर्शित करता हूं? –

@JakobLithner: समाधान एक पृष्ठ में होने के लिए सरलीकृत है। समझने की कुंजी शायद src = "play.aspx? Filename = sound.mp3" है। तो आपके पास डेटा की सेवा करने के लिए अलग-अलग पृष्ठ हो सकते हैं (प्रस्तुत पृष्ठ_लोड) और एक पृष्ठ जहां नियंत्रण है। – IvanH

<audio> के लिए डेटा को सही तरीके से कैसे प्रदान करें?

उत्तर

संबंधित मुद्दे