() translation by (you can also view the original English article)
इस ट्यूटोरियल के दौरान मैं आपको HTML5 ऑडियो पर पेश करने जा रहा हूं और आपको दिखा रहा हूं कि आप अपना खुद का प्लेयर कैसे बना सकते हैं।
यदि आप शॉर्टकट लेना चाहते हैं, तो Envato Market पर उपलब्ध तैयार किए गए HTML5 Audio Player पर नज़र डालें। यह आपको विभिन्न स्रोतों से प्लेलिस्ट बनाने देता है, और अनुकूलन विकल्पों की एक विस्तृत श्रृंखला के साथ आता है।
आप मदद करने के लिए Envato स्टूडियो पर कई HTML5 experts भी पा सकते हैं।
परिचय
अब तक एक वेब प्रोजेक्ट में ऑडियो लागू करना एक कठिन प्रक्रिया है जो फ्लैश जैसे तृतीय पक्ष प्लगइन्स पर निर्भर करती है। चूंकि आईफोन की प्लगइन की कुख्यात गैर स्वीकृति और खबर है कि एडोब अब मोबाइल के लिए फ्लैश का समर्थन नहीं करेगा, कई डेवलपर्स अपनी परियोजनाओं में ऑडियो को शामिल करने के अन्य तरीकों को देख रहे हैं। यह वह जगह है जहां समस्या को हल करने के लिए HTML5 ऑडियो स्टेप इन करता हैं।
यद्यपि HTML5 वेब पर ऑडियो फाइलों को चलाने के लिए मानक प्रदान करता है, फिर भी यह अपने बचपन में है और फ्लैश ऑडियो जैसे अन्य प्लगइन्स प्रदान करने से पहले यह अभी भी काफी लंबा रास्ता तय कर सकता है। हालांकि, ज्यादातर मामलों के लिए, यह पर्याप्त से अधिक है।
सरल HTML5 ऑडियो
HTML5 का उपयोग कर वेब पेज में ऑडियो को लागू करने का सबसे आसान तरीका नया audio टैग का उपयोग करना है। इसे अपने HTML5 दस्तावेज़ में निम्नलिखित कोड के साथ जोड़ें:
1 |
<audio controls="controls"> |
2 |
<source src="track.ogg" type="audio/ogg" /> |
3 |
<source src="track.mp3" type="audio/mpeg" /> |
4 |
Your browser does not support the audio element. |
5 |
</audio>
|
यदि आप ऊपर दिए गए कोड को देखते हैं तो आप देख सकते हैं कि मैंने <audio> टैग घोषित कर दिया है और नियंत्रण विशेषता परिभाषित की है, ताकि हम प्लेयर के लिए डिफ़ॉल्ट नियंत्रण देख सकें।
<audio> में हमारे पास 2 'src' टैग हैं। एक MP3 ट्रैक परिभाषित करता है और दूसरा OGG फॉर्मेट को परिभाषित करता है। OGG प्रारूप विशेष रूप से फ़ायरफ़ॉक्स में संगीत चलाने की अनुमति देने के लिए प्रयोग किया जाता है क्योंकि लाइसेंसिंग समस्याओं के कारण फ़ायरफ़ॉक्स प्लगइन का उपयोग किए बिना MP3 का समर्थन नहीं करता है। टेक्स्ट की एक स्ट्रिंग Your browser does not support the audio element. असमर्थित ब्राउज़र वाले उपयोगकर्ताओं को पता है कि क्या हो रहा है।
डिफ़ॉल्ट HTML5 ऑडियो प्लेयर
HTML5 ऑडियो टैग Attributes
साथ ही ग्लोबल HTML5 विशेषताओं का समर्थन करने वाला टैग अपने आप के लिए विशिष्ट विशेषताओं के सेट का भी समर्थन करता है।
- autoplay - यह परिभाषित करने के लिए "सत्य" या बाएं खाली "" पर सेट किया जा सकता है कि पृष्ठ लोड होने पर ट्रैक स्वचालित रूप से खेलना चाहिए या नहीं।
- controls - ऊपर दिए गए उदाहरण में देखा गया है, यह परिभाषित करता है कि मूल नियंत्रण जैसे 'प्ले, पॉज़' इत्यादि दिखाया जाना चाहिए।
- loop - इसे "लूप" पर सेट किया जा सकता है और यह निर्धारित करता है कि ट्रैक समाप्त होने के बाद ट्रैक को फिर से खेलना चाहिए या नहीं।
- preload - इसे "ऑटो" पर सेट किया जा सकता है (जो वर्णन करता है कि फ़ाइल लोड होने पर फ़ाइल लोड होनी चाहिए), "मेटाडाटा" (जो बताता है कि केवल मेटाडेटा, ट्रैक शीर्षक इत्यादि लोड किया जाना चाहिए), "none" जो निर्देश देता है कि ब्राउज़र लोड होने पर ब्राउज़र को फ़ाइल लोड नहीं करना चाहिए)।
- src - यह उपर्युक्त उदाहरण में भी देखा जा सकता है और संगीत के url को परिभाषित करता है जिसे ऑडियो टैग द्वारा खेला जाना चाहिए।
ग्यारह तक इसे क्रैंकिंग
पिछले कुछ चरणों में हमने HTML5 ऑडियो के सबसे सरल रूप को देखा है। जब हम javascript के साथ ऑडियो टैग का उपयोग शुरू करते हैं तो हम कुछ वाकई दिलचस्प और उपयोगी ऑडियो प्लेयर बनाना शुरू कर सकते हैं। आइए देखें कि jQuery हमारे लिए क्या कर सकता है। jQuery में document ready को परिभाषित करने के बाद, हम अपनी ऑडियो फ़ाइल को इस तरह सरल रखने के लिए एक नया ऑडियो वेरिएबल बना सकते हैं:
1 |
var myaudio = new Audio('mysong.mp3');
|
वास्तव में यह उतना आसान है! फिर जब भी हम ऑडियो पर कोई कार्रवाई करना चाहते हैं तो हम वेरिएबल 'myaudio' का उपयोग कर इसे ट्रिगर कर सकते हैं। यहां क्रियाओं की एक सूची दी गई है जिसे हम वेरिएबल के साथ ले सकते हैं। इनके बारे में एक नोट बनाएं, हम बाद में उनमें से कुछ का उपयोग कर रहे होंगे जब हम अपना ऑडियो प्लेयर बनाते हैं..
1 |
myaudio.play(); - This will play the music. |
2 |
myaudio.pause(); - This will stop the music. |
3 |
myaudio.duration; - Returns the length of the music track. |
4 |
myaudio.currentTime = 0; - This will rewind the audio to the beginning. |
5 |
myaudio.loop = true; - This will make the audio track loop. |
6 |
myaudio.muted = true; - This will mute the track |
यदि ऑडियो बजाने के बाद आप एक फ़ंक्शन को कॉल करना चाहते हैं तो आप 'myaudio.addEventListener (' end ', myfunc)' का उपयोग कर सकते हैं - यह ऑडियो समाप्त होने के बाद 'myfunc ()' को कॉल करेगा।
HTML5 ऑडियो प्लेयर बनाना: मार्कअप
अब जब आपके पास HTML5 ऑडियो पर थोड़ी सी बैकग्राउंड है और बुनियादी सिद्धांतों को समझें, तो इन्हें अभ्यास में रखने और अनुकूलित HTML5 ऑडियो प्लेयर बनाने का समय है। मैं डिज़ाइन चरण को याद करूँगा क्योंकि यह इस ट्यूटोरियल के दायरे से बाहर है, लेकिन आप साथ ही साथ जुड़े हुए सोर्स कोड डाउनलोड कर सकते हैं और PSD के माध्यम से ब्राउज़ कर सकते हैं ताकि यह पता चल सके कि इसे एक साथ कैसे रखा गया है।
document का शीर्ष HTML5 doctype से बना है। Yahoos CSS Reset, शीर्षक के लिए Google web font 'Lobster'। फिर हमारे पास नवीनतम jQuery और कस्टम JavaScript फ़ाइल js.js है। वास्तव में हमारे पास html5slider.js है जो फ़ायरफ़ॉक्स को HTML5 इनपुट रेंज प्रकार प्रदर्शित करने की अनुमति देता है, जिसे हम ऑडियो स्क्रबर के लिए उपयोग करेंगे।
1 |
<!DOCTYPE html>
|
2 |
<head>
|
3 |
<title>HTML5 Audio Tutorial</title> |
4 |
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"> |
5 |
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> |
6 |
<link rel="stylesheet" type="text/css" href="css/style.css"> |
7 |
<script src="http://code.jQuery.com/jQuery-latest.js" type="text/javascript"></script> |
8 |
<script type="text/javascript" src="js/js.js"></script> |
9 |
<script type="text/javascript" src="js/html5slider.js"></script> |
10 |
</head>
|
h1 शीर्षक के बाद मैंने "container" और "gradient" की क्लास के साथ एक div बनाया है। मैंने ग्रेडिएंट का एक अलग वर्ग बनाया है क्योंकि इसे कुछ अन्य तत्वों पर पुन: उपयोग किया जाएगा। ".container" के भीतर मैंने एक इमेज (जो एल्बम कवर होगा) जोड़ा है, फिर तीन एंकर टैग प्लेयर के नियंत्रण के रूप में कार्य करेंगे। उनके बीच आपको स्क्रबर/HTML5 रेंज इनपुट फ़ील्ड मिलेगा।
1 |
<body>
|
2 |
|
3 |
<h1>HTML 5 Audio Player</h1> |
4 |
|
5 |
<div class="container gradient"> |
6 |
|
7 |
<img class="cover" src="images/cover.jpg" alt=""> |
8 |
|
9 |
<div class="player gradient"> |
10 |
|
11 |
<a class="button gradient" id="play" href="" title=""></a> |
12 |
<a class="button gradient" id="mute" href="" title=""></a> |
13 |
|
14 |
<input type="range" id="seek" value="0" max=""/> |
15 |
|
16 |
<a class="button gradient" id="close" href="" title=""></a> |
17 |
|
18 |
</div><!-- / player --> |
19 |
|
20 |
</div><!-- / Container--> |
21 |
</body>
|
22 |
</html>
|
HTML5 ऑडियो प्लेयर बनाना: स्टाइल
CSS के हर पहलू से गुजरने के बजाय, मैं आपको एक सिंहावलोकन देने जा रहा हूं और किसी विशेष भाग को नोट कर सकता हूं जिसे आप ध्यान देना चाहते हैं।
नीचे दिए गए कोड में मैंने प्लेयर के लिए ग्रेडिएंट बनाया है जो इस CSS gradient editor का उपयोग करके जेनरेट किया गया है। मैंने फिर कुछ CSS3 संक्रमणों के साथ प्लेयर ".container" बनाया है।
आप देखेंगे कि मैंने 'बॉर्डर-बॉक्स' पर सेट CSS3 बॉक्स आकार देने वाली विशेषता का भी उपयोग किया है। यह कंटेनर के चारों ओर 10px पैडिंग को चौड़ाई के भीतर शामिल करने की अनुमति देता है जिसे मैंने घोषित किया है, इस मामले में 427px। अगर मैंने इसका इस्तेमाल नहीं किया था तो पैडिंग 427px में जोड़ा जाएगा जिससे कंटेनर वास्तव में इसे चाहता है। इन दिनों * {box-sizing: border-box;} लागू करने के लिए यह आम प्रथा बन रहा है जो वास्तव में स्टाइल के अधिक सहज तरीके से बनता है।
जब player पहले खुलता है तो कुछ अच्छे transitions की अनुमति देने के लिए मैंने ".coverlarge" में कुछ CSS3 transitions भी जोड़े हैं। CSS पहले थोड़ा जबरदस्त लग सकता है, लेकिन यह सुनिश्चित करने के लिए कि यह बहुत ही अलग ब्राउज़र में ऑडियो प्लेयर दिखता है और काम करता है, यह बहुत विशिष्ट ब्राउज़र उपसर्ग है।
1 |
.gradient { |
2 |
border: 1px solid black; |
3 |
|
4 |
-webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,.2); |
5 |
-moz-box-shadow: inset 0 1px 0px rgba(255,255,255,.2); |
6 |
box-shadow: inset 0 1px 0px rgba(255,255,255,.2); |
7 |
background: #494949; /* Old browsers */ |
8 |
background: -webkit-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); |
9 |
|
10 |
background: -moz-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); |
11 |
background: -o-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); |
12 |
background: -ms-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); |
13 |
background: linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); /* W3C */ |
14 |
-image filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */ |
15 |
}
|
16 |
|
17 |
.container { |
18 |
-webkit-transition: all .7s ease; |
19 |
-moz-transition: all .7s ease; |
20 |
-o-transition: all .7s ease; |
21 |
-ms-transition: all .7s ease; |
22 |
transition: all .7s ease; |
23 |
position: absolute; |
24 |
width: 427px; |
25 |
height: 70px; |
26 |
|
27 |
-webkit-border-radius: 10px; |
28 |
-moz-border-radius: 10px; |
29 |
border-radius: 10px; |
30 |
|
31 |
-webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2); |
32 |
-moz-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2); |
33 |
box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2); |
34 |
top: 50%; |
35 |
left: 50%; |
36 |
margin: -214px 0px 0px -214px; |
37 |
padding: 10px; |
38 |
|
39 |
-webkit-box-sizing: border-box; |
40 |
-moz-box-sizing: border-box; |
41 |
-ms-box-sizing: border-box; |
42 |
box-sizing: border-box; |
43 |
}
|
44 |
|
45 |
|
46 |
.containerLarge { |
47 |
height: 427px; |
48 |
}
|
49 |
|
50 |
.cover { |
51 |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; |
52 |
filter: alpha(opacity=0); |
53 |
opacity: 0; |
54 |
width: 398px; |
55 |
height: 10px; |
56 |
border: 2px solid black; |
57 |
|
58 |
-webkit-border-radius: 5px; |
59 |
-moz-border-radius: 5px; |
60 |
border-radius: 5px; |
61 |
|
62 |
-webkit-box-shadow: inset 0px 5px 5px rgba(0,0,0,1); |
63 |
-moz-box-shadow: inset 0px 5px 5px rgba(0,0,0,1); |
64 |
box-shadow: inset 0px 5px 5px rgba(0,0,0,1); |
65 |
}
|
66 |
|
67 |
.coverLarge { |
68 |
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
69 |
filter: alpha(opacity=100); |
70 |
opacity: 1; |
71 |
height: 398px; |
72 |
|
73 |
-webkit-transition: opacity .7s ease; |
74 |
-moz-transition: opacity .7s ease; |
75 |
-o-transition: opacity .7s ease; |
76 |
-ms-transition: opacity .7s ease; |
77 |
transition: opacity .7s ease; |
78 |
|
79 |
-webkit-transition-delay: .5s; |
80 |
-moz-transition-delay: .5s; |
81 |
-o-transition-delay: .5s; |
82 |
-ms-transition-delay: .5s; |
83 |
transition-delay: .5s; |
84 |
}
|
ऑडियो प्लेयर को इस चरण को कैसे देखना चाहिए
एक बार खिलाड़ी के लिए कंटेनर पूरा होने के बाद, वास्तविक नियंत्रण बनाने का समय आ गया है। CSS sprites का उपयोग करके अधिकांश बटन बनाए गए हैं
दुर्भाग्यवश IE ने अभी तक HTML5 रेंज इनपुट का समर्थन नहीं किया है, इसलिए मैंने IE उपयोगकर्ताओं को ऑडियो स्क्रबर नहीं दिखाने का फैसला किया है। यदि आप ऐसी स्थिति में हैं जहां यह स्वीकार्य नहीं है, तो आप जिस विधि का उपयोग कर चुके हैं, उसी तरह से आप jQuery UI स्लाइडर का उपयोग कर सकते हैं। फिर भी, मैंने बस स्क्रबर को छिपाने का विकल्प चुना है, इसलिए input{display:none \9! important;} यह मूल रूप से यानी उपयोगकर्ताओं से इनपुट छुपाता है (\9 पर अधिक जानकारी के लिए इस थ्रेड को स्टैक ओवरफ़्लो पर देखें)।
HTML5 रेंज स्लाइडर के साथ समस्या यह है कि केवल कुछ ब्राउज़र इसके लिए कस्टम स्टाइल का समर्थन करते हैं; मुख्य रूप से वेबकिट ब्राउज़र (क्रोम और सफारी)। ओपेरा और फ़ायरफ़ॉक्स दुर्भाग्यवश, एक मानक रेंज स्लाइडर दिखाएगा। यदि आपको सभी ब्राउज़रों में कस्टम स्टाइल की आवश्यकता है तो आप पहले उल्लेख किए गए jQuery UI स्लाइडर का उपयोग कर सकते हैं। आप input::-webkit-slider-thumb विशेषता में वेबकिट ब्राउज़र के लिए कस्टम स्टाइल देख सकते हैं।
1 |
.player { |
2 |
-webkit-box-sizing: border-box; |
3 |
-moz-box-sizing: border-box; |
4 |
-ms-box-sizing: border-box; |
5 |
box-sizing: border-box; |
6 |
position: absolute; |
7 |
width: 300px; |
8 |
bottom: 10px; |
9 |
width: 95%; |
10 |
|
11 |
-webkit-border-radius: 3px; |
12 |
-moz-border-radius: 3px; |
13 |
border-radius: 3px; |
14 |
padding: 5px; |
15 |
}
|
16 |
|
17 |
.button { |
18 |
display: block; |
19 |
width: 34px; |
20 |
height: 34px; |
21 |
background-image: url(../images/sprite.png); |
22 |
background-repeat: no-repeat; |
23 |
float: left; |
24 |
margin-right: 5px; |
25 |
}
|
26 |
|
27 |
#play { |
28 |
background-position: 6px 5px; |
29 |
}
|
30 |
|
31 |
#pause { |
32 |
background-position: -32px 5px; |
33 |
}
|
34 |
|
35 |
#mute { |
36 |
background-position: -63px 5px; |
37 |
}
|
38 |
|
39 |
#muted { |
40 |
background-position: -106px 5px; |
41 |
}
|
42 |
|
43 |
input[type="range"] { |
44 |
width: 250px; |
45 |
margin-top: -5px; |
46 |
}
|
47 |
|
48 |
#close { |
49 |
float: right; |
50 |
background-position: -146px 5px; |
51 |
display: none; |
52 |
}
|
53 |
|
54 |
.volume { |
55 |
position: absolute; |
56 |
height: 100px; |
57 |
width: 34px; |
58 |
border: 1px solid black; |
59 |
background-color: #242323; |
60 |
top: -97px; |
61 |
display: none; |
62 |
}
|
63 |
input{ |
64 |
display:none\9!important; |
65 |
}
|
66 |
input[type="range"] { |
67 |
-webkit-appearance: none; |
68 |
border: 1px solid black; |
69 |
position: absolute; |
70 |
top: 18px; |
71 |
display: block; |
72 |
width: 63%; |
73 |
height: 15px; |
74 |
|
75 |
-webkit-border-radius: 20px; |
76 |
-moz-border-radius: 20px; |
77 |
border-radius: 20px; |
78 |
background-color: #242323; |
79 |
left: 90px; |
80 |
|
81 |
-webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6); |
82 |
-moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6); |
83 |
box-shadow: inset 0px 4px 4px rgba(0,0,0,.6); |
84 |
}
|
85 |
|
86 |
input::-webkit-slider-thumb { |
87 |
-webkit-appearance: none; |
88 |
width: 20px; |
89 |
height: 20px; |
90 |
border:1px solid black; |
91 |
|
92 |
-webkit-border-radius: 10px; |
93 |
border-radius: 10px; |
94 |
background: #80e4df; /* Old browsers */ |
95 |
background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); |
96 |
|
97 |
background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); |
98 |
background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); |
99 |
background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */ |
100 |
}
|
HTML5 ऑडियो प्लेयर बनाना: jQuery
एक बार स्टाइल और मार्कअप हो जाने के बाद खिलाड़ी को वास्तव में जीवन में आने का समय लगता है। हम javascript फ्रेमवर्क jQuery का उपयोग कर ऐसा कर सकते हैं। एक बार jQuery document ready किए जाने के बाद, हम कुछ वेरिएबल्स बनाते हैं जिसमें हम अपनी jQuery ऑब्जेक्ट्स को स्टोर कर सकते हैं।
1 |
container = $('.container');
|
2 |
cover = $('.cover');
|
3 |
play = $('#play');
|
4 |
pause = $('#pause');
|
5 |
mute = $('#mute');
|
6 |
muted = $('#muted');
|
7 |
close = $('#close');
|
8 |
song = new Audio('music/track1.ogg','music/track1.mp3');
|
9 |
duration = song.duration; |
उपरोक्त "song" वेरिएबल में आप देख सकते हैं कि हमने दो ट्रैक घोषित किए हैं। अन्य ब्राउज़रों के लिए फ़ायरफ़ॉक्स और MP3 के लिए OGG प्रारूप। मैं फिर एक conditional IF कथन बना देता हूं ताकि हम जांच सकें कि ब्राउज़र एमपी 3 चला सकता है या नहीं। यदि ऐसा हो सकता है, तो हम "song" वेरिएबल स्रोत को MP3 ट्रैक बनाते हैं - यदि नहीं तो यह 'OGG' फॉर्मेट चलाएगा।
1 |
if (song.canPlayType('audio/mpeg;')) {
|
2 |
song.type= 'audio/mpeg'; |
3 |
song.src= 'music/track1.mp3'; |
4 |
} else {
|
5 |
song.type= 'audio/ogg'; |
6 |
song.src= 'music/track1.ogg'; |
7 |
} |
अगली चीजें जिन्हें हम बनाने जा रहे हैं वे क्लिक फ़ंक्शंस हैं जो हमें संगीत को चलाने और रोकने की अनुमति देंगे। मैं ऑडियो शुरू करने के लिए ऑडियो एक्शन play() का उपयोग करता हूं, फिर jQuery विधि replaceWith का उपयोग करता हूं जिसके साथ मूल रूप से प्ले बटन के साथ प्ले बटन को प्रतिस्थापित करते है।
मैंने "coverLarge" और "containerLarge" क्लासेज को "container" और "cover" में भी जोड़ा है। जैसा कि मैंने पहले CSS में CSS3 संक्रमणों को जोड़ा है, जब ऑडियो बजाना शुरू होता है तो यह एक अच्छा संक्रमण जोड़ देगा। "pause" फ़ंक्शन एक ही तरीके से काम करता है, लेकिन संक्रमण के बिना। क्लिक करने पर, यह "प्ले" बटन के साथ विराम बटन को प्रतिस्थापित करता है।
1 |
play.live('click', function(e) {
|
2 |
e.preventDefault(); |
3 |
song.play(); |
4 |
|
5 |
$(this).replaceWith('<a class="button gradient" id="pause" href="" title=""></a>');
|
6 |
container.addClass('containerLarge');
|
7 |
cover.addClass('coverLarge');
|
8 |
$('#close').fadeIn(300);
|
9 |
$('#seek').attr('max',song.duration);
|
10 |
}); |
11 |
|
12 |
pause.live('click', function(e) {
|
13 |
e.preventDefault(); |
14 |
song.pause(); |
15 |
$(this).replaceWith('<a class="button gradient" id="play" href="" title=""></a>');
|
16 |
|
17 |
}); |
म्यूट और म्यूट बटन समान रूप से प्ले और पॉज़ बटन के समान काम करते हैं, लेकिन संबंधित क्रियाओं को कॉल करते हैं और उचित विकल्पों के साथ बटन को प्रतिस्थापित करते हैं।
1 |
mute.live('click', function(e) {
|
2 |
e.preventDefault(); |
3 |
song.volume = 0; |
4 |
$(this).replaceWith('<a class="button gradient" id="muted" href="" title=""></a>');
|
5 |
|
6 |
}); |
7 |
|
8 |
muted.live('click', function(e) {
|
9 |
e.preventDefault(); |
10 |
song.volume = 1; |
11 |
$(this).replaceWith('<a class="button gradient" id="mute" href="" title=""></a>');
|
12 |
|
13 |
}); |
जब उपयोगकर्ता "क्लोज" बटन पर क्लिक करता है तो हम "कंटेनर लार्ज" और "कवरलार्ज" क्लासेज को हटाने के लिए jQuery को कॉल करते हैं। यह कवर छुपाएगा और खिलाड़ी को बैक अप बंद कर देगा। हम तब pause() कार्रवाई को कॉल करके प्लेयर को रोकें और ऑडियो करंट समय को 0 के बराबर रीसेट करें। यह ट्रैक को शुरुआत में वापस सेट करता है।
1 |
$('#close').click(function(e) {
|
2 |
e.preventDefault(); |
3 |
container.removeClass('containerLarge');
|
4 |
cover.removeClass('coverLarge');
|
5 |
song.pause(); |
6 |
song.currentTime = 0; |
7 |
$('#pause').replaceWith('<a class="button gradient" id="play" href="" title=""></a>');
|
8 |
$('#close').fadeOut(300);
|
9 |
}); |
अब ऑडियो स्क्रबर पर जाने का समय है जिसे "सीक" की id दी गई है। पहला कार्य हमें ऑडियो के किसी भी हिस्से में स्क्रबर को स्थानांतरित करने की अनुमति देना है। जब भी कोई स्क्रबर चलाता है तो बदलाव का पता लगाकर किया जाता है। फिर हमने गीत के उस भाग से मेल खाने के लिए song.currentTime सेट किया है जिसे स्क्रबर स्थानांतरित कर दिया गया है। हमने गीत अवधि को दर्शाने के लिए अधिकतम विशेषता भी सेट की है।
1 |
$("#seek").bind("change", function() {
|
2 |
song.currentTime = $(this).val(); |
3 |
$("#seek").attr("max", song.duration);
|
4 |
}); |
JQuery का अंतिम भाग ऑडियो की अवधि के साथ "#seek" स्क्रबर कदम बनाना है। हम इसे एक ईवेंट श्रोता जोड़कर करते हैं और जब ऑडियो टाइम अपडेट हम फ़ंक्शन को कॉल करते हैं। मैं वर्तमान गीत समय प्राप्त करने के लिए "curtime" का एक वेरिएबल सेट करता हूं। मैं फिर ऑडियो की वर्तमान समय स्थिति को प्रतिबिंबित करने के लिए स्क्रबर के मान को अद्यतन करता हूं।
1 |
song.addEventListener('timeupdate',function (){
|
2 |
curtime = parseInt(song.currentTime, 10); |
3 |
$("#seek").attr("value", curtime);
|
4 |
}); |
आखिर तुमने इसे हासिल कर ही लिया है! एक HTML5 ऑडियो प्लेयर जिसे आप अपनी साइट या ऐप पर कार्यान्वित कर सकते हैं।
निष्कर्ष
जैसा कि पहले उल्लेख किया गया है, HTML5 ऑडियो अभी भी अपने बचपन में है और अभी भी सुधार के लिए जगह है। फिलहाल ऑडियो संगीत चलाने के लिए डिज़ाइन किया गया है और इसलिए हमेशा सर्वर से ऑडियो स्ट्रीम करेगा जिसके परिणामस्वरूप कुछ ब्राउज़र में प्लेबैक के साथ समस्याएं होती हैं। यह हमेशा एक समस्या नहीं है, लेकिन इसका मतलब यह है कि कभी-कभी ऑडियो पूरी तरह से डाउनलोड होने से पहले भुगतान करना शुरू कर देगा।
यदि आप गेम, या ऑडियो गहन ऐप्स में ध्वनि प्रभाव जैसे चीजों के लिए HTML5 ऑडियो का उपयोग करना चाहते हैं तो यह संभावित रूप से एक मुद्दा हो सकता है। इस कारण से Google पर हमारे मित्र ऑडियो टैग की कमजोरियों को बेहतर बनाने के लिए एक विधि के साथ आए हैं। Google ने "वेब ऑडियो API" के लिए W3C को एक प्रस्ताव बनाया और आगे बढ़ाया है। यह देशी HTML5 ऑडियो की तुलना में बहुत अधिक शक्तिशाली साबित होता है, हालांकि समस्या यह है कि इस वेरिएबलण में (क्या आप अनुमान लगा सकते हैं ?!) यह केवल क्रोम में काम करता है।
आप Google के वेब ऑडियो API के बारे में अधिक पढ़ सकते हैं और Google code पर कुछ उदाहरण देख सकते हैं या वेब audio specification देख सकते हैं।
मुझे उम्मीद है कि आपने HTML5 ऑडियो सीखने और अपने खुद के खिलाड़ियों को कैसे बना सकते हैं। मेरे प्लेयर में मूल नियंत्रण शामिल है, लेकिन वॉल्यूम नियंत्रण और यहां तक कि अपने स्वयं के कस्टम एनिमेशन जोड़ने जैसी अधिक सुविधाएं जोड़ने से रोकने के लिए कुछ भी नहीं है। थोड़ी सी सोच और प्रयोग के साथ आप वास्तव में कुछ महान ऑडियो प्लेयर बना सकते हैं। स्रोत कोड डाउनलोड करें और मैं यह देखने के लिए उत्सुक हूं कि आप किस चीज के साथ आते हैं!
और यदि आप HTML5 में ऑडियो प्लेयर और अन्य मीडिया के साथ काम करने के लिए और विकल्प देखना चाहते हैं, तो एनवाटो मार्केट पर HTML5 मीडिया आइटम देखें।
