เป็นไปได้ไหมที่จะจัดรูปแบบแท็กเสียง html5

120

ฉันไม่พบแหล่งข้อมูลใด ๆ เกี่ยวกับวิธีการทำเช่นนั้น สิ่งที่ง่ายอย่างการเปลี่ยนสีของเครื่องเล่นก็น่าจะดี :)

html audio

— rabidmachine9
แหล่งที่มา

3

ทำให้ฉันนึกถึงปุ่มจังหวะบน Wurlitzers เก่า ๆ - "samba", "jazz", "waltz", ...

— David Gelhar

1

เบราว์เซอร์ที่แตกต่างกันจะตอบสนองต่อรูปแบบขององค์ประกอบเสียงที่แตกต่างกัน - stackoverflow.com/a/27765938/325251

— mvark

1

ใช่และนั่นคือมันดูแย่ที่สุด จะทำให้มันดูแย่ขนาดนี้ได้ยังไง?

— live-love

1

วิดีโอจัดแต่งทรงผมข้ามเบราว์เซอร์ตอบadvprog.blogspot.co.uk/2013/07/…

— Mousey

@ 40-Love: เป็นคำถามที่จริงจังหรือไม่? มันคือ Microsoft !!

— Ringo

47

ใช่ แท็กเสียง HTML5 ที่มีแอตทริบิวต์ "controls" ใช้โปรแกรมเล่นเริ่มต้นของเบราว์เซอร์ คุณสามารถปรับแต่งตามความต้องการของคุณได้โดยไม่ใช้การควบคุมเบราว์เซอร์ แต่หมุนการควบคุมของคุณเองและพูดคุยกับ API เสียงผ่านจาวาสคริปต์

โชคดีที่คนอื่นทำแล้ว เครื่องเล่นโปรดของฉันตอนนี้คือjPlayerมันเก๋มากและใช้งานได้ดี ลองดูสิ

— เบนนี่
แหล่งที่มา

49

ดังนั้นคำตอบคือ "ไม่เป็นไปไม่ได้คุณต้องใช้เครื่องเล่นภายนอก"?

— Fernando

2

@ เฟอร์นันโด: มันเป็นไปได้แน่นอน สิ่งนี้ตอบคำถามว่า "เป็นไปได้ไหม"

— Dan Schnau

3

ขอบคุณ @dsschnau. ผมโพสต์ความคิดเห็นของฉันเพราะเป็นคำถามที่เกี่ยวกับการจัดแต่งทรงผม HTML5 วิดีโอแท็กและคำตอบทั้งหมดที่มีมากหรือน้อยเช่นใช่มันเป็นไปได้โดยใช้แท็กอื่น ๆ

— Fernando

10

แล้วนั่นคือ "ไม่" จริงๆหรือ? การหมุน UI ของคุณเองไม่ใช่สิ่งเดียวกับมาร์กอัปที่มีอยู่

— bob

2

คำตอบนี้เป็นเพียงลิงค์ไปยังแหล่งข้อมูล จะเกิดอะไรขึ้นถ้า jPlayer หายไป ?

— Kyle

74

<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%2F

— Fábio Zangirolami
แหล่งที่มา

18

การนำเสนอแย่ แต่ตัวเลือก CSS ที่มีประโยชน์!

— Benoît

6

คุณช่วยแสดงตัวอย่างวิธีการใช้งานได้ไหม แค่โค้ดตัวอย่าง?

— Xsmael

9

รองรับเฉพาะเบราว์เซอร์บน webkit เท่านั้น (เช่นไม่ใช่ Firefox, IE เป็นต้น)

— gilad mayani

2

การแฮ็กที่ดีมากมันเป็นคำตอบที่ถูกต้องและขอบคุณมาก! ฉันเปลี่ยนรูปแบบของแท็กเสียงโดยไม่ต้องเจ็บปวดและรหัส JS เพิ่มเติม ViVa Fabio

— java acm

1

ดูเหมือน

— diachedelic

64

ใช่: คุณสามารถซ่อน UI ของเบราว์เซอร์ในตัว (โดยการลบcontrolsแอตทริบิวต์ออกจากaudio) และสร้างอินเทอร์เฟซของคุณเองแทนและควบคุมการเล่นโดยใช้ Javascript (ที่มา ):

<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>

จากนั้นคุณสามารถจัดรูปแบบองค์ประกอบตามที่คุณต้องการโดยใช้ CSS

ข้อมูลอ้างอิง MDN HTMLAudioElement API

— Gilad Mayani
แหล่งที่มา

แน่นอนว่าสิ่งนี้ (.play) จะไม่ทำงานบน IOS เนื่องจากถูกบล็อก (ดู stackoverflow.com/questions/31776548/… )

— user1432181

30

ลักษณะของแท็กขึ้นอยู่กับเบราว์เซอร์ แต่คุณสามารถซ่อนสร้างอินเทอร์เฟซของคุณเองและควบคุมการเล่นโดยใช้ Javascript

— หมดเวลา
แหล่งที่มา

14

การปรับสีบางอย่าง

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

— Arthur Veselov
แหล่งที่มา

1

นี่เป็นวิธีที่รวดเร็วและสกปรกในการเปลี่ยนสีพื้นฐานของเครื่องเล่นซึ่งมีประโยชน์มาก

— wakandan

ฉันปัดฝุ่นข้อมูลรับรองการเข้าสู่ระบบเพื่อลงชื่อเข้าใช้เพิ่มคะแนนและพูดว่า "ขอบคุณ"

— Marc Amos

9

คุณต้องสร้างเครื่องเล่นของคุณเองที่เชื่อมต่อกับองค์ประกอบเสียง HTML5 บทช่วยสอนนี้จะช่วยhttp://alexkatz.me/html5-audio/building-a-custom-html5-audio-player-with-javascript/

— katzkode
แหล่งที่มา

8

เคนก็มีสิทธิ์เช่นกัน

cssแท็ก:

audio {

}

จะได้รับผลลัพธ์บางอย่าง ดูเหมือนว่าผู้เล่นจะไม่ต้องการความสูงใด ๆ ที่สูงกว่าหรือต่ำกว่า 25px แต่ความกว้างสามารถย่อหรือยาวได้

สิ่งนี้ดีพอสำหรับฉัน ดูตัวอย่างนี้ (คำเตือนเสียงจะเล่นโดยอัตโนมัติ): www.thenewyorkerdeliinc.com

— กรงขัง
แหล่งที่มา

สำหรับฉันปัญหาใหญ่คือ Internet Explorer มันดูแย่และมีสีที่แตกต่างและมีขนาดที่ใหญ่กว่าโปรแกรมเล่นเบราว์เซอร์อื่น ๆ แม้ว่าความกว้างจะตั้งไว้ที่ 150px

— Ringo

หากคุณต้องการให้ผู้เล่น IE9 + ในพื้นที่ขนาดเล็กความสูง 25px และความกว้าง 100px เหมาะสำหรับฉัน ฉันคิดว่าความสูง 25px เป็นกุญแจสำคัญ แต่ตัวเลขที่มากขึ้นไม่ได้ผลไม่ว่าด้วยเหตุผลใดก็ตาม

— Ringo

ลิงก์หยุดทำงานอย่างน่าเสียดาย

— Alex Sorokoletov

6

หากต้องการเปลี่ยนสีของเครื่องเล่นเพียงแค่ระบุแท็กเสียงในไฟล์ css ของคุณตัวอย่างเช่นในไซต์ใดไซต์หนึ่งของฉันเครื่องเล่นจะมองไม่เห็น (สีขาวบนสีขาว) ดังนั้นฉันจึงเพิ่ม:

audio {
    background-color: #95B9C7;
}

สิ่งนี้เปลี่ยนผู้เล่นเป็นสีฟ้าอ่อน

— เกริน
แหล่งที่มา

12

สิ่งนี้ไม่ได้เปลี่ยนสีของเครื่องเล่นของฉัน แต่จะใส่เพียงสีพื้นหลังเท่านั้น คิดว่าทำไม?

— ทอม

1

@Tom เพราะโซลูชันนี้ไม่ได้มีไว้สำหรับเปลี่ยนพื้นหลังสีเทาเริ่มต้นของผู้เล่น :-) ผลลัพธ์เดียวกับคุณสำหรับฉัน

— Florian Doyen

0

ใช่เป็นไปได้จากคำตอบของ @ Fábio Zangirolami

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

— Hernán Eche
แหล่งที่มา

ไม่ทำงานบน Firefox 77

— Henry

-4

หากคุณต้องการจัดรูปแบบเครื่องเล่นเพลงมาตรฐานของเบราว์เซอร์ใน CSS:

audio {
    enter code here;
}

— Kenneth Klippert
แหล่งที่มา

1

คำอธิบายที่ไม่สมบูรณ์นั้นง่ายมากและฉันสามารถใช้วิธีนี้เพื่อจัดแต่งทรงผมเสียงองค์ประกอบทั้งหมด

— Davod Aslanifakor

แม้แต่การตรวจสอบคำตอบแบบคร่าวๆของคำตอบนี้ก็แสดงให้เห็นว่ามันผิด

— Isaac Lubow