브라우저 제목

audio css

 

html

 

                      <div class="sound">
                            
                            <button class="play fa fa-play-circle" id="btn1"></button>
                            <!-- SOUNDS -->
                            <audio id="sound1" controls loop>
                                <source src="audio/music.mp3" type="audio/ogg" />
                            </audio>
                        </div>

 

css

 

.play{
    width:30px;
    height:30px;
    vertical-align: middle;
    display:none;
}
audio{
    width:300px;
    height:30px; 
    vertical-align: middle;
}
audio:focus{
    outline:none;
}

 

js

 

$(function(){
     
    var flag=true;
    var audio1=document.getElementById("sound1");
    audio1.volume=0.2;
    $('#btn1').click(function(){
    var $this = $(this);
        
//    $this.toggleClass('active');
//    if($this.hasClass('active')){
      if(flag){
        $this.attr('class','play fa fa-pause-circle');   
        $("#sound1")[0].play();
          flag=false;
    } else {
        $this.attr('class','play fa fa-play-circle'); 
        $("#sound1")[0].pause();
        flag=true;
    }
});
   
    
});

제목 날짜
포트폴리오 샘플 2020.05.21
데스크탑, 모바일 구분 접속 2019.02.11
터치이벤트, pc환경과 모바일 환경 알아내기 file 2020.05.04
코르도바 를 설정하기 위한 방법 file 2020.04.26
sticky position file 2020.04.22
webfont file 2020.04.21
video file 2020.04.15
audio2 file 2020.04.15
audio 2020.04.11
wheel이벤트3 file 2020.04.11
wheel이벤트2 file 2020.04.11
wheel이벤트1 file 2020.04.11
드레그 앤 드롭 효과 예제 file 2020.04.03
드레그 앤 드롭 효과 원리 file 2020.04.03
슬라이드 페이지 네이션 file 2020.04.02
좌/우 슬라이드 슬라이드 개수처리, 너비 처리 file 2020.04.02
모바일 작업 file 2020.04.02
자격증 슬라이드 기본 2020.03.30
스크롤바 없에는 css 2020.03.30
터지이벤트와 mouseup, mousedown이벤트 2020.03.28
태그 목록