HTML에서 태그 스타일을 수정하는 방법

HTML5의 인기로 인해 이제 오디오를 사용하여 모바일 단말기에서 대부분의 요구에 맞게 오디오를 재생할 수 있습니다. 그러나 간단한 재생/중지 효과만 필요할 수도 있지만 다른 브라우저의 오디오 스타일은 만족스럽지 않습니다. 사실 이 스타일을 바꾸시겠습니까? 그 원칙은 상대적으로 간단합니다. 즉, 오디오를 작성할 때 컨트롤 속성을 사용하지 않고, 기본 오디오를 숨긴 다음, p와 같은 태그를 사용하여 CSS 스타일을 정의하여 효과를 표시하는 것입니다. 마지막으로 js를 사용하여 기본적으로 src 경로, 일시 중지, 로드 및 재생과 같은 오디오 이벤트를 캡처합니다. 다음은 오디오 태그의 일부 관련 API입니다.

제어 함수 함수 설명

load(): 오디오 및 비디오 소프트웨어를 로드합니다. 재생 전에 미리 로드하는 데 사용되는 동적으로 생성된 요소가 아닌 한 일반적으로 호출할 필요가 없습니다

play(): 오디오 및 비디오 파일을 로드하고 재생합니다. 파일이 다른 위치에서 일시 중지되지 않은 경우 기본적으로 처음부터 재생이 시작됩니다.

pause(): 재생 중인 오디오 및 비디오 파일을 일시 중지합니다.

오디오 스크립트로 제어 가능한 기능 값:

src: 오디오 파일 경로.

autoplay: 오디오 자동 재생 여부를 설정하거나(기본값은 로드된 미디어 파일 자동 재생) 자동 재생으로 설정되었는지 쿼리합니다.

autobuffer: 페이지가 로드될 때 오디오를 자동으로 버퍼링할지 여부를 설정합니다. 설정된 경우 자동 재생이 비활성화되면 이 기능이 무시됩니다.

loop: 오디오를 반복 재생할지 여부를 설정합니다. , 또는 loop

currentTime으로 설정되었는지 쿼리합니다. 재생 시작부터 현재까지의 시간을 s 단위로 반환합니다. currentTime 값을 설정하여 특정 위치로 이동할 수도 있습니다.

controls: Show 또는 사용자 제어 인터페이스를 숨기거나(재생, 일시 정지 및 볼륨 제어를 추가하는 속성입니다.)

볼륨: 0.0~1.0 사이의 볼륨 값을 설정하거나 현재 볼륨 값을 쿼리합니다.

음소거: 음소거 여부를 설정합니다.

읽기- only 속성 속성 설명

duration: Get 미디어 파일의 재생 기간(s)을 얻을 수 없는 경우 NaN

paused됩니다. 미디어 파일이 일시 중지된 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다

ended: 미디어 파일 재생이 끝나면 true를 반환합니다.

startTime: 버퍼링된 미디어 파일이고 콘텐츠의 일부가 더 이상 버퍼에 없는 경우를 제외하고 재생 시작 시간(보통 0.0)을 반환합니다.

error: 오류 코드 오류 발생 후 반환

currentSrc:

문자열 형식으로 소스 요소에서 브라우저가 선택한 파일에 해당하는 재생 또는 로드 중인 파일을 반환합니다.

주요 브라우저는 이러한 속성을 지원합니다. 그러나 오디오 재생 스트림에는 두 가지 진영이 있다고 생각하지 마십시오. Firefox와 Opera는 ogg 오디오를 지원하고 Safari와 IE는 mp3를 지원합니다. 다행히 구글 크롬이 이를 지원한다.

<p class="btn-audio"><audio id="mp3Btn"><source src="images/audio.mp3" type="audio/mpeg" /></audio></p>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>

body{
    background:#2b2938;
}
.btn-audio{
    margin: 90px auto;
    width: 186px;
    height: 186px;
    background:url(images/voice_stop.png) no-repeat center bottom;
    background-size:cover;
}

<script type="text/javascript">
    $(function(){
        //播放完毕
        $(&#39;#mp3Btn&#39;).on(&#39;ended&#39;, function() {
            console.log("音频已播放完成");
            $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_stop.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
        })
        //播放器控制
        var audio = document.getElementById(&#39;mp3Btn&#39;);
        audio.volume = .3;
        $(&#39;.btn-audio&#39;).click(function() {
            event.stopPropagation();//防止冒泡
            if(audio.paused){ //如果当前是暂停状态
                $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_play.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
                audio.play(); //播放
                return;
            }else{//当前是播放状态
                $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_stop.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
                audio.pause(); //暂停
            }
        });
    })
</script>

기술적 구현의 원리는 상대적으로 간단합니다. 즉, 기본 오디오를 숨긴 다음 p를 사용하여 플레이어의 효과를 표시한 다음 클릭 이벤트를 호출하여 재생 및 중지를 트리거한 다음 이 값은 얻을 수 있는 경우도 있지만 불가능한 경우도 있어 다소 혼란스럽기 때문에 이때 구성 요소를 얻을 수 없는 경우 오디오 태그의 지속 시간 속성 저장 시간을 맞춤 설정하는 것이 좋습니다. , 이 값을 얻게 됩니다.

아아아아

위 내용은 HTML에서