2011-04-12 7 views
19

오디오 태그의 너비를 설정할 수 있는지 궁금합니다. 기본적으로 지원되는 기능이 아니므로 "해킹"이 행복하게 받아 들여집니다.
나는 작은 div와 테이블에 그것들을 넣으려고했으나 아주 부드럽게 보이지 않았다. 내가 볼 수있는 한, 나는 그것에 대해 괴롭 히고있는 유일한 사람이다. 그러나 나는 정말로 도움을 바란다.html 5 오디오 태그 너비

크로스 플랫폼/브라우저 지원이 필요하지 않습니다. FireFox (3.6 ++)가 지원하는 한 만족합니다. 내가 사용됩니다 무엇인지에

빠른 예 :

audio { width: 200px; } 

참고 : CSS와

<audio preload="auto" id="id12" controls="controls" onended="func12();" src="http://192.168.1.68/mymusic.wav"></audio> 

답변

36

설정 그것은 당신이 다른 HTML 요소의 너비를 설정하는 것과 동일한 방법으로, 즉, audio은 Firefox에서 기본적으로 인라인 요소이므로 display: block으로 설정할 수도 있습니다. Here's an example. 인라인 예를 찾는 분들을 위해

+3

부끄러운 크롬 플레이어는 자신을 중심으로 전 800 픽셀의 폭을 확장합니다. – Harvey

7

, 여기에 하나입니다

<audio controls style="width: 200px;"> 
    <source src="http://somewhere.mp3" type="audio/mpeg"> 
</audio> 

적어도 놀랍도록하지는 "높이"설정을 존중하지 않는 것 같습니다. 그러나 컨트롤을 "사용자 정의"할 수 있지만 내장 컨트롤을 사용하는 대신 자신 만의 컨트롤을 만들거나 비슷하게 자체 위젯을 만드는 다른 위젯을 사용할 수 있습니다.

1

또한 오디오 태그의 너비를 자바 스크립트 :

audio = document.getElementById('audio-id'); 
audio.style.width = '200px'; 
0

당신은 간단한 것들로 보스를 HTML을 사용할 수 있습니다 :

<embed src="music.mp3" width="3000" height="200" controls>