作业 音乐盒

最新推荐文章于 2023-05-08 01:24:29 发布
最新推荐文章于 2023-05-08 01:24:29 发布
阅读量383 收藏 1
点赞数 2
分类专栏： H5+CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fantasy_geek/article/details/105716163
版权 
<!DOCTYPE html>
<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><!-- #controls -->
				<div class="info">
					<p class="song"><a href="#" target="_blank">Count The Hours - BEAUZ/Nevve/Kastilione</a></p>
					<p class="author"><a href="#" target="_blank">Bernie Yang/Johan Yang/Keeley Bumford</a></p>
				</div><!-- #info -->
				<div class="lyrics">
					<p>I&apos;m waiting through the shallows</p>
					<p>Just waiting for a sign</p>
					<p>It&apos;s dark under the clouds tonight clouds tonight</p>
					<p>You know I count the hours</p>
					<p>I&apos;m waiting every second</p>
					<p>Till you realize</p>
					<p>Through the lows and the highs</p>
					<p>I&apos;m the one you had to find</p>
					<p>Hey oooh</p>
					<p>Yeah oooh</p>
					<p>Will you realize</p>
					<p>I&apos;m the one you had to find</p>
					<p>To find</p>
					<p>You know I count</p>
					<p>You know I count</p>
					<p>You know I play until play until</p>
					<p>You know I count</p>
					<p>I used to know just what I needed</p>
					<p>Figures in the light</p>
					<p>But now I&apos;m struggling to survive</p>
					<p>The collide</p>
					<p>You know I count the hours</p>
					<p>I&apos;m waiting every second</p>
					<p>Till you realize</p>
					<p>Through the lows and the highs</p>
					<p>I&apos;m the one you had to find</p>
					<p>Hey oooh</p>
					<p>Yeah oooh</p>
					<p>Will you realize</p>
					<p>I&apos;m the one you had to find</p>
					<p>To find</p>
					<p>You know I count</p>
					<p>You know I count</p>
					<p>You know I play until play until</p>
					<p>You know I count</p>
				</div><!-- #lyrics -->
				<p class="scroll">收起</p>
			</div><!-- cover -->
		</div><!-- #player -->
	</div><!-- #container -->
	<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 = '<i class="fa fa-pause fa-3x"></i>';
		      audio.play();
		   } else {
		      playpause.title = "播放";
		      playpause.innerHTML = '<i class="fa fa-play fa-3x"></i>';
		      audio.pause();
		   }
		}
		//定义设置音量的方法：setVolume()，设置Audio对象的volume属性等于range控件的值
		function setVolume() {
		   audio.volume = volume.value;
		}
	</script>
</body>
</html>

效果图：
在这里插入图片描述

任由天高
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html网页音乐盒播放器
06-25
html音乐盒 播放器 源码 易懂易上手 支持本地音乐拖放上传网页，播放暂停前进后退应有尽有
html——制作音乐盒
lengyuefengqing的博客
06-14 4593
无标题文档 *{padding:0;margin:0} .all{ width:500px; margin:20px auto; } .out{float:left;} .inner img{ width:200px; height:120px; border:1px solid #0FF; padding:4px; } .text{ font-size:14px;
网页设计期中作业-音乐介绍播放页面
weixin_43474701的博客
07-25 165
网页设计期中作业-音乐介绍播放页面 点我下载资源
html5——3D案例（音乐盒子、百度钱包）
weixin_30340617的博客
12-21 343
1、音乐盒子：触碰盒子，盖子会打开 2、百度钱包：触碰钱包，钱包，会180度旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ...
基于AT89S52单片机的八音盒
07-11
这是基于51单片机制作的八音盒的单片机源程序，可以进行一下参考。
安卓大作业之音乐播放器
07-04
本项目“安卓大作业之音乐播放器”旨在通过整合网络上的部分源码，构建一个基础但功能完善的音乐播放器。在这个过程中，我们将探讨Android Studio 3.6环境下如何实现播放、切换歌曲以及显示歌词等核心功能。 1. **...
酷我音乐移动端Web网页设计
06-05
在本资源中，我们主要探讨的是“酷我音乐移动端Web网页设计”，这涉及到网页开发中的关键技术，包括...通过学习这个资源，开发者可以提升自己在移动端网页设计上的技能，更好地创造出适应多设备环境的音乐播放体验。
网页设计期末大作业（html、css静态网页）-音乐网站
07-03
在这个特定的案例中，我们关注的是一个以音乐为主题的静态网页项目，它由学生作为期末大作业完成。这个项目包括了几个关键组成部分：登录页面、注册页面、反馈页面、首页页面、歌手页面以及MV页面，这些都充分展示了...
web前端大作业、期末作业，音乐网站
最新发布
06-17
【标题】：“web前端大作业、期末作业，音乐网站” 这个标题揭示了这是一个关于Web前端开发的项目，可能是一个学生的大作业或者期末作业，目的是创建一个音乐主题的网站。这通常意味着我们需要用到HTML（超文本标记...
微信小程序期末大作业 音乐小程序
10-20
在这个“微信小程序期末大作业——音乐小程序”项目中，我们可以看到一个以音乐为主题的微信小程序的实现。这个小程序可能包含了播放音乐、搜索歌曲、创建歌单、分享音乐等功能，旨在提供一个轻松愉快的音乐娱乐环境...
MATLAB 音响系统工具箱
weixin_30847271的博客
02-28 430
音响系统工具箱 设计和测试音频处理系统 发行说明 pdf文档 音频系统工具箱™为音频处理系统的设计，仿真和桌面原型设计提供了算法和工具。它支持低延迟信号流式传输到音频接口，交互式参数调整以及数字音频工作站音频插件的自动生成。 音频系统工具箱包括音频处理算法（如滤波，均衡，动态范围控制和混响），源（如音频振荡器和波波合成器）和测量（如a-和c加权）库。与外部midi...
html5播放器设置音量的方式实例源代码
专注企业级视频应用，企业视频直播、MR虚拟直播、教育培训连麦直播
05-08 984
方式1：html5播放器设置音量的方式实例源代码。方式2：酷播云html5播放器代码实例
【HTML5媒体API项目】-音乐播放器的设计与实现
代号006
08-29 2601
设计一款基于H5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首的切换。
项目6-3音乐播放器
m0_46444569的博客
05-04 1269
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5音乐播放器</title> <link rel="stylesheet" href="css/audio.css" media="screen" type="text/css"...
HTML5 CSS3实战——自定义音乐播放器（一）
a253664942的专栏
05-01 2万+
前几天才刚开始接触HTML5和CSS3。学习了一下里面的一些炫酷的新特性。不过，对于原生的HTML5的媒体播放器，真的不得不吐槽：就三个按钮 界面还那么丑。所以觉得自己整一个好看的播放器。老话说：说不如干，纸上谈兵终觉浅。所以结合这几天来学的东西，自己写了一个HTML5的播放器。 HTML5原生播放器： 我们的效果图：歌曲列表：首先分析下界面，将主面板解剖一下： 整个界面都是用H
matlab音乐_MATLAB乐器（如何用matlab演奏音乐）
weixin_29292535的博客
01-22 3477
近期在家无聊，刷B站视频的时候发现有up上传了matlab制作的音乐，效果很是有趣。顺带吐槽一下，手机端的B站总是推荐莫名其妙的内容，但是通过搜索关键词，你又总能搜到不错的视频，我试了几个教学课程，视频质量都很高。1代码的简要介绍函数sound(y, Fs, nBits)，用于把信号数据的矩阵转换成声音，三个参数分别代表输入信号，采样频率和比特率。标准CD格式为44.1k的采样频率，16...
设置banner条 文字右边对齐(text-align)_文字颜色(color)_100%整个宽度(width+absolute)
有 prepare , No out
10-13 1272
#banner { width:100%; padding:2px 0px; bottom:1px; position:absolute; text-align:right; color:#fff; background:#666; border-bottom:1px solid #ffffff; border-top:1px solid #ffff
【matlab 播放音乐】教你如何用matlab播放音乐
热门推荐
赖德发的博客
06-07 2万+
1、代码片段1 [fname,pname]=uigetfile('.wav','选择原始声音文件'); file=[pname,fname]; fs = 8000; [x,fs] = wavread(file); sound(x,fs); 2、代码片段2 [y,Fs,bits] = wavread('jinyong.wav'); %获取音乐数据 ao = analogoutput('winsou
基于AT89C51单片机的数字音乐盒设计
这篇内容是关于基于单片机的数字音乐盒设计的大作业描述，主要涉及了单片机技术、C语言编程以及音乐播放系统的构建。项目选择了AT89C51型号的单片机作为核心处理器，该单片机具有丰富的I/O端口，适用于控制系统。 1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值