브라우저 제목

샘플

http://comlearn.co.kr/project1/mobile/audio.html

html

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<title>HTML5 Audio Tutorial</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/audio.js"></script>

</head>

<body>

 

    <div class="container gradient">

        <div class="player gradient">

            <button class="button gradient " id="play" href="" title="">
                <span class="fa fa-play"></span>
            </button>
            <button class="button gradient " id="mute" href="" title="">
                <span class="fa fa-volume-up"></span>
            </button>

                <input type="range" id="volume"  value="0.2" max="1" step="0.01"/>

        </div><!-- / player -->
        
    </div><!-- / Container-->
    
    <div class="audio-wrap">

<!-- SOUNDS -->
<audio id="sound1" controls>
    <source src="audio/music.mp3" type="audio/ogg" />
</audio>

    </div>
    
</body>
</html>

 

css

 

@charset "utf-8"; /* CSS Document */
 

h1 {
    font-family: 'Lobster', cursive;
    font-size: 30px;
    width: 260px;
    margin: 20px auto 0px auto;
    color: #74dad5;
    text-shadow: 0px 0px 10px rgba(0,0,0,1);
}

.gradient {
    border: 1px solid black;

    -webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
    -moz-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
    box-shadow: inset 0 1px 0px rgba(255,255,255,.2);
    background: #494949; /* Old browsers */
background: -webkit-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

    background: -moz-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
    background: -o-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
    background: -ms-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
    background: linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); /* W3C */
-image  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */
}

.container {
    
    position: relative;
    width: 427px;
    height: 70px;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
    -moz-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
    box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);
    
    margin:0;
    margin-left:100px;
    margin-top:200px;
    padding: 10px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.player {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    width: 300px;
    bottom: 10px;
    width: 95%;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding: 5px;
}

.button {
    display: block;
    width: 34px;
    height: 34px;
    background:transparent;
    float: left;
    margin-right: 5px;
}

#play {
    font-size:1.3em;
    color:#999;
    
}

#mute {
    font-size:1.3em;
    color:#aaa;
}

input[type="range"] {
    width: 250px;
    margin-top: -5px;
}

input{
    display:none\9!important;
}
input[type="range"] {
    -webkit-appearance: none;
    border: 1px solid black;
    position: absolute;
    top: 18px;
    display: block;
    width: 63%;
    height: 15px;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background-color: #242323;
    left: 90px;

    -webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
    -moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
    box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);
}

input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border:1px solid black;

    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #80e4df; /* Old browsers */
    background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);

    background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
    background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);
    background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */
}
 
.audio-wrap{
    clear:both;
    float:left;
    margin-left:100px;
}
button:focus{
    outline:none;
}
input:focus{
    outline:none;
}
 

js

 

$(function(){
    var au=document.getElementById("sound1");
    console.log(au)
     au.volume=0.2;
    
    $("#volume").on('input',function(){
       var vol=parseFloat($("#volume").val());
        vol=vol+0.01;
        au.volume=vol;
    });
    von=true;
    $("#mute").click(function(){
        if(von){
            au.volume=0;
            $(this).html('<span class="fa fa-volume-off"></span>');
            von=false;
        }else{
            au.volume=0.2;
            $(this).html('<span class="fa fa-volume-up"></span>');
            von=true;
        }
        
    });
  
    var flag=true;
    $("#play").click(function(){
        console.log("클릭");
        var $this = $(this);

          if(flag){
            $this.html('<span class="fa fa-stop"></span>');   
            $("#sound1")[0].play();
              flag=false;
        } else {
            $this.html('<span class="fa fa-play"></span>');   
            $("#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
태그 목록