html5 HTML<audio> और विरासत ब्राउज़रों के लिए फ़ॉलबैक समाधान




internet-explorer internet-explorer-8 (3)

मुझे एक और उदाहरण मिल गया है जिसमें मैंने एमपी 3 से ओजीजी फॉलबैक के लिए थोड़ा बदलाव किया था। यह canPlayType विधि का उपयोग करता है:

var audiofile = 'example.mp3';
var audioTag = document.createElement('audio');
if (!(!!(audioTag.canPlayType) && ("no" != audioTag.canPlayType("audio/mpeg"))
      && ("" != audioTag.canPlayType("audio/mpeg")))) {
    audiofile = audiofile.replace('.mp3','.ogg');
}

मैं विभिन्न ऑडियो क्लिप के साथ एक ध्वनि बोर्ड बनाने पर काम कर रहा हूं।

मानक एचटीएमएल 5 ऑडियो नियंत्रणों के उपयोग के बजाय, मैं प्रत्येक बटन को कुछ शीर्षक पाठ के साथ शैली में रखना चाहता हूं, ताकि जब कोई उपयोगकर्ता एक बटन दबाए, संबंधित क्लिप नाटकों।

एचटीएमएल 5 ब्राउज़र में सब कुछ ठीक काम कर रहा है (क्रोम, फ़ायरफ़ॉक्स, सफारी, और आईई 9 +), निम्न कोड का उपयोग कर:

    <script type="text/javascript" charset="utf-8">
       $(function() {
            $("audio").removeAttr("controls").each(function(i, audioElement) {
                var audio = $(this);
                var that = this; //closure to keep reference to current audio tag
                $("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() {
                    that.play();
                }));
            });
        });
    </script>

    <!-- Sample Audio Clip -->
    <audio controls preload="auto" autobuffer title="Sounds of Laughter"> 
    <source src="assets/clips/1.mp3" />
    <source src="assets/clips/1.ogg" />
    </audio>

हालांकि, यह समाधान इंटरनेट एक्सप्लोरर 8 जैसी गैर-एचटीएमएल 5 संगत ब्राउज़रों पर समर्थित नहीं है।

मैं किसी तरह के समाधान समाधान की तलाश कर रहा हूं जो मुझे (ए) का पता लगाएगा कि कोई ब्राउज़र एचटीएमएल 5 टैग का समर्थन नहीं करता है और ध्वनि बोर्ड के वैकल्पिक संस्करण को पुनर्निर्देशित करता है या (बी) फ़ॉलबैक (फ़्लैश, आदि) बटन पर कस्टम स्टाइल के साथ यदि समर्थन मौजूद नहीं है।


आप मॉडर्नजिन स्क्रिप्ट लाइब्रेरी पर एक नज़र रखना चाहिए यह आपको ब्राउज़र द्वारा HTML5 सुविधाओं का समर्थन करने के आधार पर सशर्त तर्क को करने की अनुमति देगा। उदाहरण के लिए, आप ऐसा कुछ कर सकते हैं:

var audio = new Audio();
audio.src = Modernizr.audio.ogg ? 'background.ogg' :
            Modernizr.audio.mp3 ? 'background.mp3' :
                                  'background.m4a';
audio.play();

दस्तावेज़ीकरण यहां पाया जा सकता है: http://modernizr.com/docs/#features-html5


गारेट ने कहा और जेप्लेयर के रूप में आपको दोनों मॉडर्निज्रर का उपयोग करना चाहिए

संगतता के लिए कैसे जांचना है पर गेटेट का जवाब देखें हालांकि मुझे नहीं पता है कि यह उपयोगी क्यों होगा यदि आपका एकमात्र उद्देश्य HTML5 या फ्लैश को संगतता के आधार पर चलाने के लिए है। जेप्लेयर स्वचालित रूप से करता है

आपको इसे तुरंत इन्स्तांत करना होगा:

$("#music").jPlayer({
    ready: function (event) {
        $(this).jPlayer("setMedia", {
            mp3:"music.mp3",
            oga:"music.ogg"
        });
    },
    swfPath: "js",
    supplied: "mp3, oga"
});

निम्न इंटरफ़ेस पर निर्भर करता है जिसे आप उपयोग करना चाहते हैं। jPlayer के पास कुछ खाल है, लेकिन आप उन्हें अपनी इच्छा के अनुसार संशोधित कर सकते हैं या सिर्फ एक पूरी तरह से इंटरफेस बना सकते हैं जैसे कि मैं करता हूं और जेप्लेयर मेथिड





html5-audio