पहला चरण: अपने Flash ऑब्जेक्ट को ऑडियो टैग के साथ रैप करना
जो ब्राउज़र ऑडियो टैग को नहीं पहचानते वे इसके बजाय Flash कॉन्टेंट लोड करेंगे.
<audio>
<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>
दूसरा चरण: सोर्स रेफ़रंस जोड़ना
हम जितनी चाहें उतनी "सोर्स" लाइनें और फ़ॉर्मैट जोड़ सकते हैं. अगर ब्राउज़र किसी खास फ़ॉर्मैट के साथ काम नहीं करता है, तो वह अगले फ़ॉर्मैट पर स्विच कर देगा.
<audio>
<source src="test.mp3" type="audio/mpeg" />
<source src="test.ogg" type="audio/ogg" />
<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>
तीसरा चरण: Flash के लिए फ़ॉलबैक जोड़ना
हम फ़्लैश ऑडियो प्लेयर में फ़ॉलबैक जोड़ते हैं, ताकि अगर ब्राउज़र हमारे बताए गए किसी भी फ़ॉर्मैट के साथ काम न करे, तो भी आपके वीडियो को चलाया जा सके. उदाहरण के लिए, Firefox 3.5 सिर्फ़ Ogg फ़ॉर्मैट वाले ऑडियो टैग के साथ काम करता है. हालांकि, हो सकता है कि हमारे पास सिर्फ़ mp3 फ़ाइल उपलब्ध हो.
<audio>
<source src="test.mp3" type="audio/mpeg" />
<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>
<div id="player_fallback"></div>
<script type="application/javascript">
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>
इसे आसान बनाने के लिए, हम JavaScript के ज़रिए Flash प्लेयर को शामिल करने के लिए, SWFObject लाइब्रेरी का इस्तेमाल कर रहे हैं. लाइब्रेरी को शामिल करने के लिए, अपने हेडर में ये दो लाइनें डालकर, Google AJAX Libraries API का इस्तेमाल किया जा सकता है:
<script src="http://www.google.com/jsapi" type="application/javascript"></script>
<script type="application/javascript">google.load("swfobject", "2.2");</script>
चौथा चरण: प्लेयर दिखाने के लिए डिफ़ॉल्ट कंट्रोल जोड़ना
इन कंट्रोल में बदलाव नहीं किया जा सकता. आखिर में दिए गए उदाहरण देखें. ये डिफ़ॉल्ट कंट्रोल, काम करने वाले फ़ॉर्मैट के बावजूद दिखेंगे. इसलिए, हमें पहले से बनाई गई शर्त के हिसाब से, इन कंट्रोल को दिखाना होगा.
<audio id="audio_with_controls" controls="controls">
<source src="test.mp3" type="audio/mpeg" />
<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>
<div id="player_fallback"></div>
<script type="application/javascript">
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
... SWFObject script line here ...
document.getElementsById('audio_with_controls').style.display = 'none';
}
}
</script>
इसके अलावा, JavaScript और CSS का इस्तेमाल करके अपना प्लेयर भी बनाया जा सकता है.
<audio id="audio">
<source src="test.mp3" type="audio/mpeg" />
<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>
<div id="player_fallback"></div>
<div id="player" style="display: none">
<button onClick="document.getElementById('audio').play()">Play</button>
<button onClick="document.getElementById('audio').pause()">Pause</button>
</div>
<script type="application/javascript">
if (document.createElement('audio').canPlayType) {
if (!document.createElement('audio').canPlayType('audio/mpeg')) {
... SWFObject script lines here ...
} else { // HTML5 audio + mp3 support
document.getElementById('player').style.display = 'block';
}
}
</script>