HTML
<div class="top">
<div class="copy">Menu Stuff Goes Here</div>
</div>
<div class="big-box">
<div class="child">
<div class="content">
<div class="col-md-12"> <h1>Mini Audio Slide Player</h1></div>
<div class="col-md-12"><strong>Details:</strong>HTLM 5 audio player that fits in the bottom of your browser window.</div>
<div class="col-md-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam a ante ultricies bibendum. Etiam sagittis justo vel consectetur lobortis. Aenean tempor massa a nunc viverra, et facilisis odio tempor. Nam molestie ultricies nulla sit amet mattis. Praesent porttitor dui est, sit amet auctor risus dictum vel. Suspendisse et blandit justo. Cras tincidunt in nisl id porttitor.
</div>
<div class="col-md-6">
Nam mi felis, finibus eu augue nec, interdum auctor ante. Donec eget bibendum leo. Ut et pulvinar ex, ultrices pharetra sapien. Nunc ullamcorper nunc id odio euismod vulputate. Nunc congue, augue id tincidunt consequat, nisi felis ultrices nisi, eu posuere nibh tellus nec metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet feugiat sodales. Etiam vel sapien odio. Quisque id felis orci. Aenean varius enim vel orci fringilla molestie. Etiam metus purus, imperdiet a ligula non, sagittis tempor nibh. Vestibulum ultricies enim eget mi malesuada, a hendrerit nulla finibus. Quisque eget massa ac sapien sodales aliquam. Cras dolor neque, tristique ut semper et, ullamcorper at diam. Maecenas vulputate eu elit quis imperdiet.
</div>
<div class="col-md-6">
Nullam tristique enim a diam venenatis, ut pulvinar ex interdum. Vestibulum est massa, facilisis in sem sit amet, rutrum imperdiet sapien. Aenean semper leo nec elit commodo ullamcorper. Aliquam sed arcu nibh. Pellentesque quis mauris a nisl malesuada ornare quis ultrices risus. Sed nunc sapien, ornare quis pharetra sed, dictum nec ex. Aenean quam turpis, suscipit a facilisis et, commodo ut nisl. Etiam sagittis euismod convallis. Ut vitae felis ut ipsum pulvinar dignissim.
<div class="play-audio col-md-12" audioUrl="http://tympanus.net/Development/AudioPlayer/audio/BlueDucks_FourFlossFiveSix.mp3">Play Audio</div>
</div>
</div>
</div>
</div>
<div class="audio-box">
<img class="open-mic mic" src="http://www.wpwebos.com/images/mic.svg"/>
<audio class="myAudio" src="" controls></audio>
</div>
CSS
@import url('//fonts.googleapis.com/css?family=Josefin+Sans:300,300i,400,400i,600,600i,700');
body{
font-family: 'Josefin Sans', sans-serif;
}
.top{
font-family: 'Josefin Sans', sans-serif;
display:block;
position:relative;
width:100%;
height:60px;
background-color:#000;
color: #fff;
text-align:center;
overflow:hidden;
margin:0px;
padding:0px;
font-size:18px;
}
.top .copy{
padding-top:20px;
}
.big-box{
height: calc(100vh - 60px);
width:100%;
display: table;
background-color: #333;
color:#efefef;
}
.child {
display: table-cell;
vertical-align: middle;
}
.content{
position:relative;
display:block;
max-width: 960px;
width:90%;
margin: 0 auto;
font-family: 'Josefin Sans', sans-serif;
font-size:18px;
line-height:1.25em;
}
.content h1{
text-align: center;
}
.content div{
margin-bottom:20px;
}
.play-audio{
margin:20px 0 20px 0;
text-align: center;
font-weight: 700;
text-transform: uppercase;
border-width:1px;
border-style:solid;
border-color:#666;
padding: 13px 0 10px 0;
font-size:18px;
line-height:1.0;
letter-spacing: 0.25em;
background-color:transparent;
transition: all 0.5s;
cursor: pointer;
}
.play-audio:hover{
background-color: #000;
}
.audio-box{
position: fixed;
bottom:20px;
right:0px;
width: 56px;
height: 80px;
background-color: #000;
-moz-box-shadow: 0 0 60px 0 #00000;
-webkit-box-shadow: 0 0 60px 0 #00000;
box-shadow: 0 0 60px 0 #00000;
color:#efefef;
z-index:999;
border-width:1px 0px 1px 1px;
border-style:solid;
border-color:#666;
transition: all 1s;
opacity: 0;
}
.audio-box.open{
width:90%;
max-width:480px;
opacity: 1;
}
.audio-box.close{
width:56px;
max-width:56px;
opacity: 0.3;
}
.audio-box img{
display:block;
position:absolute;
max-width: 20px;
margin: 23px 0 0 20px;
cursor: pointer;
}
.audio-box audio{
position: absolute;
width:calc(100% - 75px);
top:23px;
left:55px;
}
.close:focus, .close:hover{
opacity: 1 !important;
}
JAVASCRIPT
$( document ).ready(function() {
$( ".play-audio" ).stop().click(function() {
$('.audio-box').addClass('open');
$('.audio-box').removeClass('close');
$('.open-mic').addClass('close-mic');
$('.myAudio').attr("src", $(this).attr("audioURL"));
});
$('.audio-box').stop().on('click', '.open-mic', function(){
$('.audio-box').addClass('open');
$('.audio-box').removeClass('close');
$('.open-mic').addClass('close-mic');
$('.open-mic').removeClass('open-mic');
});
$('.audio-box').stop().on('click', '.close-mic', function(){
$('.close-mic').addClass('open-mic');
$('.close-mic').removeClass('close-mic');
$('.audio-box').addClass('close');
$('.audio-box').removeClass('open');
});
});
1 Response