क्या html5 ऑडियो टैग को स्टाइल करना संभव है?

Question

मुझे ऐसा करने के लिए कोई संसाधन नहीं मिला है। खिलाड़ी के रंग बदलने के रूप में सरल कुछ अच्छा होगा :)

Comments

मुझे पुराने Wurlitzers पर लय बटन के बारे में सोचता है - "सांबा", "जैज", "वाल्ट्ज", ...

— डेविड गेल्हार

अलग-अलग ब्राउज़र ऑडियो तत्व की स्टाइलिंग के लिए अलग तरह से प्रतिक्रिया करते हैं - stackoverflow.com/a/27765938/325251

— mvark

हाँ, और यह सबसे खराब लग रहा है। वे इसे इतना बुरा कैसे बना सकते हैं?

— लाइव-लव

वीडियो स्टाइल क्रॉस ब्राउज़र जवाब advprog.blogspot.co.uk/2013/07/…

— माउस

@ 40-लव: यह एक गंभीर सवाल है? यह Microsoft है !!

— रिंगो

Answer 1

हाँ! "नियंत्रण" विशेषता के साथ HTML5 ऑडियो टैग ब्राउज़र के डिफ़ॉल्ट खिलाड़ी का उपयोग करता है। आप ब्राउज़र नियंत्रणों का उपयोग न करके इसे अपनी पसंद के अनुसार अनुकूलित कर सकते हैं, लेकिन अपने स्वयं के नियंत्रणों को रोल कर सकते हैं और जावास्क्रिप्ट के माध्यम से ऑडियो एपीआई से बात कर सकते हैं।

सौभाग्य से, अन्य लोग पहले ही ऐसा कर चुके हैं। मेरा पसंदीदा खिलाड़ी अभी jPlayer है , यह बहुत शैलीगत है और बहुत अच्छा काम करता है। इसकी जांच - पड़ताल करें।

Comments

तो जवाब है "नहीं, यह संभव नहीं है, आपको एक बाहरी खिलाड़ी का उपयोग करना चाहिए"?

— फर्नांडो

@ फर्नांडो: यह वास्तव में संभव है। यह सवाल का जवाब देता है "क्या यह संभव है?"

— डैन सिनकाऊ

साभार @dsschnau मैंने अपनी टिप्पणी पोस्ट की है क्योंकि सवाल html5 वीडियो टैग स्टाइल के बारे में है , और सभी उत्तर कमोबेश हां जैसे हैं , यह संभव है, अन्य टैग का उपयोग करना ।

— फर्नांडो

तो, यह वास्तव में एक "नहीं" है? अपने खुद के यूआई को रोल करना एक समान नहीं है एक स्टाइलिंग मौजूदा मार्कअप।

— बॉब

यह उत्तर वास्तव में एक संसाधन का लिंक मात्र है। अगर jPlayer चला जाए तो क्या होगा ?

— काइल

Answer 2

<audio>

audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

संदर्भ: https://chromium.googlesource.com/chromium/blink/+/72fef91ac1ef679207f51def8133b336a6f6588f/Source/core/css/mediaControls.css?autodive=0%2F%2F%2F2

Comments

खराब प्रस्तुति लेकिन उपयोगी सीएसएस चयनकर्ता!

— बेनोइट

क्या आप कृपया इनका उपयोग करने का एक उदाहरण दिखा सकते हैं? सिर्फ नमूना कोड?

— Xsmael

यह केवल वेबकिट-आधारित ब्राउज़रों द्वारा समर्थित है (जैसे फ़ायरफ़ॉक्स, IE, आदि नहीं)

— gilad mayani

बहुत अच्छा हैकिंग, यह सही उत्तर है और बहुत धन्यवाद! मैं दर्द और अतिरिक्त JS कोड के बिना ऑडियो टैग की शैली को बदल देता हूं, ViVa Fabio

— java acm

Gist.github.com/afabbro/3759334

— diachedelic

Answer 3

हां: आप अंतर्निहित ब्राउज़र UI ( controlsविशेषता को हटाकर audio) छिपा सकते हैं और इसके बजाय अपना स्वयं का इंटरफ़ेस बना सकते हैं और जावास्क्रिप्ट ( स्रोत ) का उपयोग करके प्लेबैक को नियंत्रित कर सकते हैं :

<audio id="player" src="vincent.mp3"></audio>
<div> 
  <button onclick="document.getElementById('player').play()">Play</button> 
  <button onclick="document.getElementById('player').pause()">Pause</button> 
  <button onclick="document.getElementById('player').volume += 0.1">Vol +</button> 
  <button onclick="document.getElementById('player').volume -= 0.1">Vol -</button> 
</div>

फिर आप उन तत्वों को स्टाइल कर सकते हैं जो आप सीएसएस का उपयोग करना चाहते हैं।

MDN HTMLAudioElement एपीआई संदर्भ

Comments

निश्चित रूप से यह (.play) IOS पर काम नहीं करेगा क्योंकि यह अवरुद्ध है (देखें stackoverflow.com/questions/31776548/… )

— user1432181

Answer 4

टैग की उपस्थिति ब्राउज़र-निर्भर है, लेकिन आप इसे छिपा सकते हैं, अपना स्वयं का इंटरफ़ेस बना सकते हैं और जावास्क्रिप्ट का उपयोग करके प्लेबैक को नियंत्रित कर सकते हैं।

Answer 5

कुछ रंग ट्यूनिंग

audio {
    filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
    width: 200px;
    height: 25px;
}

Comments

यह खिलाड़ी के मूल रंगों को बदलने के लिए एक त्वरित और गंदा तरीका है, बहुत आसान है

— wakandan

मैंने साइन इन करने के लिए अपने लॉगिन क्रेडेंशियल्स को धूल चटा दी, इसे उखाड़ फेंका और कहा "थैंक यू"।

— मार्क अमोस

Answer 6

आपको अपना खुद का खिलाड़ी बनाना होगा जो एचटीएमएल 5 ऑडियो तत्व के साथ इंटरफेस करता है। यह ट्यूटोरियल http://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/ में मदद करेगा

Answer 7

केन के पास भी यह अधिकार था।

एक cssटैग:

audio {

}

आपको कुछ परिणाम मिलेंगे। ऐसा लगता है कि यह खिलाड़ी को 25px से ऊपर या नीचे किसी भी ऊंचाई पर नहीं चाहता है, लेकिन चौड़ाई को छोटा या एक हद तक लंबा किया जा सकता है।

यह मेरे लिए काफी अच्छा था; इस उदाहरण को देखें (चेतावनी, ऑडियो अपने आप बजता है): www.thenewyorkerdeliinc.com

Comments

मेरे लिए, एक बड़ा मुद्दा इंटरनेट एक्सप्लोरर है। यह अन्य ब्राउज़र खिलाड़ियों की तुलना में भयानक और अलग रंग और बहुत बड़ा आकार दिखता है, भले ही चौड़ाई 150px पर सेट हो

— रिंगो

यदि आपको IE9 + खिलाड़ी को एक छोटी जगह में लाने की आवश्यकता है, तो 25px की ऊंचाई और 100px की चौड़ाई मेरे लिए काम करती है। मुझे लगता है कि 25px की ऊंचाई महत्वपूर्ण थी, लेकिन बड़ी संख्या में जो भी कारण के लिए काम नहीं किया।

— रिंगो

लिंक दुर्भाग्य से नीचे है

— एलेक्स सोरकोलेटोव

Answer 8

बस खिलाड़ी का रंग बदलने के लिए, बस अपनी सीएसएस फ़ाइल में ऑडियो टैग को संबोधित करें, उदाहरण के लिए मेरी एक साइट पर खिलाड़ी अदृश्य हो गया (सफेद रंग पर सफेद) तो मैंने जोड़ा:

audio {
    background-color: #95B9C7;
}

इसने खिलाड़ी को हल्के नीले रंग में बदल दिया।

Comments

यह मेरे खिलाड़ी का रंग नहीं बदलता है, यह केवल इसके पीछे एक पृष्ठभूमि रंग डालता है। कोई विचार क्यों?

— टॉम

@ क्योंकि यह समाधान खिलाड़ी के डिफ़ॉल्ट ग्रे बैकग्राउंड को बदलने के लिए नहीं है :-) मेरे लिए आपके समान परिणाम।

— फ्लोरियन डॉयेन

Answer 9

हाँ, यह संभव है, @ फैबियो ज़ंजीरोली के उत्तर से

audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
                background-color: red;
}

Comments

फ़ायरफ़ॉक्स 77

— हेनरी

Answer 10

यदि आप CSS में ब्राउज़र के मानक म्यूजिक प्लेयर को स्टाइल करना चाहते हैं:

audio {
    enter code here;
}

Comments

नहीं पूरा विवरण बहुत सरल है और मैं सभी तत्व ऑडियो स्टाइलिंग के लिए इस तरह से उपयोग कर सकते हैं

— davod Aslanifakor

यहां तक ​​कि इस उत्तर की एक सरसरी जाँच से पता चला होगा कि यह गलत है।

— इसहाक लुबो