<audio> टैग के लिए कस्टम सीएसएस?

Question

मैं एक म्यूजिक प्लेयर वेब एप्लिकेशन बना रहा हूं जो एचटीएमएल 5 ऑडियो टैग लागू करता है, हालांकि यह ब्राउज़र में लगातार दिखना चाहेगा - क्या यह मेरा खुद का कस्टम सीएसएस परिभाषित करना संभव है? और कैसे?

चियर्स

Fela

Answer 1

वर्तमान में किसी भी तरह से सीएसएस का उपयोग कर एचटीएमएल 5 <audio> खिलाड़ियों शैली नहीं है। इसके बजाय, आप control विशेषता को छोड़ सकते हैं, और जावास्क्रिप्ट का उपयोग करके अपने नियंत्रण लागू कर सकते हैं। यदि आप उन्हें अपने आप सभी को लागू नहीं करना चाहते हैं, तो मैं jPlayer जैसे मौजूदा थीम करने योग्य HTML5 ऑडियो प्लेयर का उपयोग करने की अनुशंसा करता हूं।

Answer 2

ऑडियो टैग के लिए सीएसएस विकल्प हैं।

तरह: html 5 audio tag width

लेकिन अगर आप इसके साथ चारों ओर खेलने आप देखेंगे परिणाम अप्रत्याशित हो सकता है - मुझे पता चला काफी दुर्घटना से (मैं समय पर छवियों के साथ काम कर रहा था

Answer 3

अगस्त 2012 के रूप में) कि बॉक्स-छाया, सीमा-त्रिज्या और संक्रमण बोग-मानक ऑडियो टैग प्लेयर के साथ काफी अच्छी तरह से काम करते हैं। मेरे पास यह क्रोम, एफएफ और ओपेरा में काम कर रहा है।

audio:hover, audio:focus, audio:active 
{ 
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); 
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); 
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); 
-webkit-transform: scale(1.05); 
-moz-transform: scale(1.05); 
transform: scale(1.05); 
} 

साथ: -

audio 
{ 
-webkit-transition:all 0.5s linear; 
-moz-transition:all 0.5s linear; 
-o-transition:all 0.5s linear; 
transition:all 0.5s linear; 
-moz-box-shadow: 2px 2px 4px 0px #006773; 
-webkit-box-shadow: 2px 2px 4px 0px #006773; 
box-shadow: 2px 2px 4px 0px #006773; 
-moz-border-radius:7px 7px 7px 7px ; 
-webkit-border-radius:7px 7px 7px 7px ; 
border-radius:7px 7px 7px 7px ; 
} 

मैं तुम्हें यह केवल "यह थोड़ा tarts" अनुदान, लेकिन यह उन्हें बनाता है एक दृष्टि क्या पहले से ही वहाँ है और अधिक से अधिक रोमांचक है, और कर प्रमुख के बारे में fannying बिना जे एस।

आईई में उपलब्ध नहीं है, दुर्भाग्य से (अभी तक संक्रमण बिट का समर्थन नहीं कर रहा है), लेकिन ऐसा लगता है कि यह अच्छी तरह से गिरावट आई है।

Answer 4

अन्य उत्तरों में उल्लिखित बॉक्स-छाया, रूपांतरण और सीमा विकल्पों के अलावा, वेबकिट ब्राउज़र वर्तमान में "समय बीत चुके" संख्याओं के रंग को सेट करने के लिए -webkit-text-fill-color का पालन करते हैं, लेकिन चूंकि कोई रास्ता नहीं है अपनी पृष्ठभूमि को सेट करने के लिए (जो प्लेटफ़ॉर्म के साथ भिन्न हो सकता है, उदाहरण के लिए कुछ ऑपरेटिंग सिस्टम पर उल्टा उच्च-विपरीत मोड), आपको सलाह दी जाएगी कि वे "प्रारंभिक" मान को -webkit-text-fill-color सेट करें, अगर आपने इसे कहीं और इस्तेमाल किया है और ऑडियो तत्व इसे विरासत में मिला है, अन्यथा कुछ उपयोगकर्ता उन संख्याओं को अपठनीय पाते हैं।