作业 音乐盒
<html lang="en">
<head>
<meta charset="UTF-8">
<title>音乐盒子title>
<style type="text/css">
/*并排放置两个带边框的框时，可令边框和内边距包含在指定宽度和高度内，用来解决盒子被挤掉下去的问题。*/
*, *:before, *:after {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100%;
background: #EEE;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 300;
}
a { color: #FFF; text-decoration: none; }
a:hover { color: #26C5CB; }
p { margin: 0; }
#container,
#player,
.cover {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#container {
width: 320px;
height: 320px;
}
#player {
width: 300px;
height: 300px;
background: #fff;
border-radius: 50%;
overflow: hidden;
box-shadow: 2px 2px 20px 0 rgba(0,0,0,0.3);
z-index: 300;
}
/*专辑封面 */
img {
width: 100%;
height: 100%;
background: #fff;
opacity: 0.75;/*透明度75%*/
}
/*播放按钮 */
.controls {
position: relative;
width: 100%;
color: #fff;
text-align: center;
}
button {
margin: 5px;
color: #fff;
background: transparent;/*背景透明*/
border: 0;
outline: 0;
cursor: pointer;
text-align: center;
text-shadow: 1px 1px 2px #000;
/*过渡：所有属性都改变 在0.3s内完成 以慢速开始和结束*/
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
button:hover {
color: #26C5CB;
}
/* 歌曲信息*/
.info {
position: relative;
margin-top: 28px;
bottom: 10px;
color: #fff;
text-align: center;
text-shadow: 1px 1px 3px #000;
}
.song {
font-size: 18px;
}
.author {
font-size: 14px;
margin-bottom: -8px;
}
/*以下三个属性写在一起表示该元素超出内容宽度后显示为省略号 */
.song, .author{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Volume音量控件的样式 */
input[type='range'] {
display: block;
margin: 14px auto;
width: 80px;
height: 2px;
outline: 0;
cursor: pointer;
box-shadow: 1px 1px 3px 0 #000;
}
/*伪元素::-webkit-slider-thumb改变range的默认样式*/
input[type='range']::-webkit-slider-thumb {
background: #AEAEAE;
width: 6px;
height: 6px;
border-radius: 50%;
transition: 0.1s all linear;
-webkit-transition: 0.1s all linear;
-webkit-appearance: none !important;
}
/*鼠标悬停时，该元素背景颜色变为#26C5CB，放大为原来的2倍*/
input[type='range']:hover::-webkit-slider-thumb {
background: #26C5CB;
-webkit-transform:scale(2);
}
/*隐藏复选框*/
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
text-shadow: 1px 1px 3px #000;
}
.to-lyrics-label:hover {
color: #26C5CB;
}
label.to-lyrics-label {
position: absolute;
top: 276px;
left: 50%;
width: 20px;
height: 20px;
margin-left: -5px;
color: #fff;
cursor: pointer;
z-index: 500;
}
/* Lyrics */
.lyrics {
position: relative;
width: 100%;
height: 96px;
margin-top: 30px;
padding: 4px 24px;
color: #000;
background: rgba(255,255,255,0.3);
font-size: 12px;
text-align: center;
overflow-y: scroll;/*当内容超过div高度时，出现滚动条，内容滚动显示*/
box-shadow: inset 0 -3px 5px 0 rgba(0,0,0,0.5);
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
/*当鼠标悬停在歌词时，背景变为白色80%透明*/
.lyrics:hover {
background: rgba(255,255,255,0.8);
}
/*清除滚动条样式*/
.lyrics::-webkit-scrollbar {
display: none;
}
.scroll {
color: #fff;
text-align: center;
font-size: 9px;
font-weight: bold;
text-shadow: 1px 1px 3px #000;
}
.cover {
padding-top: 145px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
/*~ 用于选取属性值中包含指定词汇的元素*/
#to-lyrics:checked ~ .cover {
padding-top: 40px;
}
#to-lyrics:checked ~ .cover .lyrics {
margin-top: 0px;
}
#to-lyrics:checked ~ .cover button {
margin: 4px;
}
style>
<link rel="stylesheet" href="css/font-awesome.min.css" media="screen" type="text/css" />
head>
<body>
<div id="container">
<div id="player">
<audio id="audio">
<source src="audio/Count The Hours.mp3" type="audio/mpeg" codecs="mp3"/>
audio>
<img src="img/音乐盒子背景图.jpg">
<label class="to-lyrics-label" for="to-lyrics"><i class="fa fa-caret-down fa-lg">i>label>
<input type="checkbox" id="to-lyrics">
<div class="cover">
<div class="controls">
<button title="循环播放"><i class="fa fa-retweet fa-lg">i>button>
<button title="上一曲"><i class="fa fa-backward fa-2x">i>button>
<button id="play-pause" title="播放" onclick="togglePlayPause()"><i class="fa fa-play fa-3x">i>button>
<button title="下一曲"><i class="fa fa-forward fa-2x">i>button>
<button title="顺序播放"><i class="fa fa-random fa-lg">i>button>
<input name="volume" id="volume" min="0" max="1" step="0.1" type="range" onchange="setVolume()" />
div>
<div class="info">
<p class="song"><a href="#" target="_blank">Count The Hours - BEAUZ/Nevve/Kastilionea>p>
<p class="author"><a href="#" target="_blank">Bernie Yang/Johan Yang/Keeley Bumforda>p>
div>
<div class="lyrics">
<p>I'm waiting through the shallowsp>
<p>Just waiting for a signp>
<p>It's dark under the clouds tonight clouds tonightp>
<p>You know I count the hoursp>
<p>I'm waiting every secondp>
<p>Till you realizep>
<p>Through the lows and the highsp>
<p>I'm the one you had to findp>
<p>Hey ooohp>
<p>Yeah ooohp>
<p>Will you realizep>
<p>I'm the one you had to findp>
<p>To findp>
<p>You know I countp>
<p>You know I countp>
<p>You know I play until play untilp>
<p>You know I countp>
<p>I used to know just what I neededp>
<p>Figures in the lightp>
<p>But now I'm struggling to survivep>
<p>The collidep>
<p>You know I count the hoursp>
<p>I'm waiting every secondp>
<p>Till you realizep>
<p>Through the lows and the highsp>
<p>I'm the one you had to findp>
<p>Hey ooohp>
<p>Yeah ooohp>
<p>Will you realizep>
<p>I'm the one you had to findp>
<p>To findp>
<p>You know I countp>
<p>You know I countp>
<p>You know I play until play untilp>
<p>You know I countp>
div>
<p class="scroll">收起p>
div>
div>
div>
<script type="text/javascript" charset="gbk">
/*第6单元 项目6-3 音乐播放器 js文件*/
var audio = document.getElementById('audio');
var playpause = document.getElementById("play-pause");
var volume = document.getElementById("volume");
audio.controls = false;
//定义控制歌曲播放暂停的方法：togglePlayPause()。
//该方法中在切换播放暂停的同时需要切换字体图标和按钮的title属性值
function togglePlayPause() {
if (audio.paused || audio.ended) {
playpause.title = "暂停";
playpause.innerHTML = '';
audio.play();
} else {
playpause.title = "播放";
playpause.innerHTML = '';
audio.pause();
}
}
//定义设置音量的方法：setVolume()，设置Audio对象的volume属性等于range控件的值
function setVolume() {
audio.volume = volume.value;
}
script>
body>
html>
效果图：
