चरण 1: अपने Flash ऑब्जेक्ट को ऑडियो टैग से रैप करें
जो ब्राउज़र ऑडियो टैग को नहीं पहचान पाते वे इसके बजाय Flash कॉन्टेंट लोड कर देंगे.
<audio>
</span><span class="old">
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</span><span class="new">
</audio>
दूसरा चरण: सोर्स रेफ़रंस जोड़ना
हम जितनी चाहें उतनी "सोर्स" लाइन और फ़ॉर्मैट जोड़ सकते हैं. अगर ब्राउज़र किसी एक फ़ॉर्मैट पर काम नहीं करता है, तो वह अगले फ़ॉर्मैट पर वापस चला जाएगा और इसी तरह आगे बढ़ जाएगा.
<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" />
<source src="test.ogg" type="audio/ogg" /></span><span class="old">
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio></span>
तीसरा चरण: Flash में फ़ॉलबैक जोड़ना
सुरक्षित रहने के लिए हमें Flash ऑडियो प्लेयर में फ़ॉलबैक जोड़ना होगा. ऐसा इसलिए, क्योंकि ब्राउज़र हमारे बताए गए किसी भी फ़ॉर्मैट पर काम नहीं करता है. उदाहरण के लिए, Firefox 3.5 सिर्फ़ Ogg फ़ॉर्मैट वाले ऑडियो टैग के साथ काम करता है, लेकिन हो सकता है कि हमारे पास सिर्फ़ mp3 फ़ाइल उपलब्ध हो.
<span class="old"><audio></span>
<span class="new"><source src="test.mp3" type="audio/mpeg" /></span><span class="old">
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
</span><span class="new">
<div id="player_fallback"></div>
<script>
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
swfobject.embedSWF(
"player_mp3_mini.swf",
"player_fallback",
"200",
"20",
"9.0.0",
"",
{"mp3":"test.mp3"},
{"bgcolor":"#085c68"});
}
}
</script></span>
इसे आसान बनाने के लिए, हम JavaScript के ज़रिए Flash प्लेयर डालने के लिए, SWFObject लाइब्रेरी का इस्तेमाल कर रहे हैं. लाइब्रेरी को शामिल करने के लिए, Google AJAX Libraries API का इस्तेमाल करें. इसके लिए, अपने हेडर में ये दो लाइनें डालें:
<span class="new"><script src="https://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script></span></pre>
चौथा चरण: प्लेयर दिखाने के लिए डिफ़ॉल्ट कंट्रोल जोड़ें
इन कंट्रोल को पसंद के मुताबिक नहीं बनाया जा सकता (आखिर में उदाहरण देखें). ये डिफ़ॉल्ट कंट्रोल दिखेंगे, भले ही कोई भी फ़ॉर्मैट इस्तेमाल किया जा रहा हो. इसलिए, हमें पहले बनाए गए कुछ शर्तों के साथ ही इसके दिखने की सेटिंग को मैनेज करना होगा.
// TODO: DevSite - Code sample removed as it used inline event handlers
इसके अलावा, JavaScript और सीएसएस का इस्तेमाल करके खुद का प्लेयर बनाया जा सकता है.
// TODO: DevSite - Code sample removed as it used inline event handlers