小小项目：网页音乐播放器

最新推荐文章于 2023-09-24 11:34:57 发布
最新推荐文章于 2023-09-24 11:34:57 发布
阅读量566 收藏 6
点赞数
文章标签： json php Apache bootstrap 网页音乐播放器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43734339/article/details/98086707
版权

项目名称：网页音乐播放器
使用技术：该项目的服务端是基于Apache的，数据保存的格式为json
项目描述：在网页上播放服务端的音乐，并能实现音乐的上传和删除，其中的CSS样式使用到bootstrap，服务端的语言为PHP

第一步先做好音乐列表的样式，样式如下图：
图片为音乐列表源代码list.php如下：

<!-- 
date：2019-8-1 
name：小鱼 
主页面：list.php
-->

<?php 
    //TODO: 获取到json格式的文件内容,其中的内容是以字符串的形式存放在str中
	$str = file_get_contents('D:\apache\site1\songs\data.json');
	// var_dump($str);
	
	//TODO: 对字符串进行解码,true参数表示解码后为数组形式的数据
	$data = json_decode($str,true);
	// var_dump($data);
	// array(2) {
 //  [0]=>
 //  array(5) {
 //    ["id"]=>
 //    string(13) "5d429077480e1"
 //    ["title"]=>
 //    string(9) "陈奕迅"
 //    ["artist"]=>
 //    string(6) "单车"
 //    ["images"]=>
 //    array(2) {
 //      [0]=>
 //      string(46) "/unload/5d429077480e9-59f2d87f42a57icon-01.png"
 //      [1]=>
 //      string(46) "/unload/5d42907748979-59f2d87f43ecficon-03.png"
 //    }
 //    ["source"]=>
 //    string(46) "/unload/5d42907757919-4.陈奕迅 - 单车.mp3"
 //  }
 //  [1]=>
 //  array(5) {
 //    ["id"]=>
 //    string(13) "5d42973e9e15d"
 //    ["title"]=>
 //    string(6) "十年"
 //    ["artist"]=>
 //    string(9) "陈奕迅"
 //    ["images"]=>
 //    array(1) {
 //      [0]=>
 //      string(46) "/unload/5d42973e9e165-59f2d87f43511icon-02.png"
 //    }
 //    ["source"]=>
 //    string(47) "/unload/5d42973ea3fe0-11.陈奕迅 - 十年.mp3"
 //  }
 ?>

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<!-- 连接bootstrap.css样式库
	<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
	<div class="container">
		<h3>音乐列表</h3>
		<hr />
		<!-- 跳转的add.php页面 -->
		<a href="add.php" type="button" class="btn btn-primary">添加</a>
		<table class="table table-bordered table-hover table-striped">
			<thead>
				<tr>
					<th>歌名</th>
					<th>作者</th>
					<th>海报</th>
					<th>歌曲</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!-- 遍历data数据 -->
				<?php foreach($data as $item) {?>
					<tr>
						<td><?php echo $item["title"] ?></td>
						<td><?php echo $item["artist"] ?></td>
						<td>
							<!-- 如果有多张海报则循环遍历海报并显示 -->
							<?php for($i=0; $i < count($item["images"]); $i++) {?>
								<img src="<?php echo $item["images"][$i] ?>" alt="">
							<?php }?>							
						</td>
						<td><audio src="<?php echo $item["source"] ?>" controls></audio></td>
						<!-- 点击删除键会跳转到delete.php进行删除操作，完成后会返回到主页面list.php -->
						<td><a class="btn btn-danger" href="delete.php?id=<?php echo $item['id']; ?>">删除</a></td>
					</tr>
				<?php }?>		
			</tbody>
		</table>
		
	</div>
</body>
</html>

第二步：添加歌曲的模块
其中的表单页面样式如下图：
在这里插入图片描述其中海报的文件栏可以上传多张图片，属于但文本框选择多文件
源代码add.php如下：

<?php 
	//定义全局变量error_message
	$GLOBALS['error_message'] = '';
	function add_music(){
		//先设置一个data数组来存放数据
		$data = array(); 
		//data中的id值为随机生成
		$data['id'] = uniqid();
		//判断$_POST传过来的数据是否为空
		if(empty($_POST['title'])){
			$GLOBALS['error_message'] = '一定要输入歌名的哟';
			return;
		}
		if(empty($_POST['artist'])){
			$GLOBALS['error_message'] = '一定要输入歌手的哟';
			return;
		}
		//如果不为空,则存放到data数组中
		$data['title'] = $_POST['title'];
		$data['artist'] = $_POST['artist'];
		
		//检验客户端上传的图片文件
		if(!isset($_FILES['images'])){
			echo $_FILES['images'];
			$GLOBALS['error_message'] = '一定要输入图片文件的哟';
			return;
		}
		$images = $_FILES['images'];//'images'为表单中的name属性值
		$data['images'] = array();
		//var_dump($images['name']);
		for($i = 0; $i < count($images['name']); $i++){
			if($images['error'][$i] !== UPLOAD_ERR_OK){
				$GLOBALS['error_message'] = '请正确输入图片文件哟';
				return;
			}
			//校验文件大小
			if($images['size'][$i]>10*1024*1024){
				$GLOBALS['error_message'] = '图片文件过大';
				return;
			}
			if($images['size'][$i] < 1024){
				$GLOBALS['error_message'] = '图片文件过小';
				return;
			}
			//校验文件类型
			$allow_images = array('image/png','image/gif','image/jpeg');
			if(!in_array($images['type'][$i],$allow_images)){
				$GLOBALS['error_message'] = '不支持该图片文件类型';
				return;
			}
			$tarimg = '../unload/' . uniqid() . '-' . $images['name'][$i];
			if(!move_uploaded_file($images['tmp_name'][$i], $tarimg)){
				$GLOBALS['error_message'] = '上传失败图片文件哟';
				return;
			}
			$data['images'][] = substr($tarimg,2);
		}
		// var_dump($data);

		
		//检验客户端上传的音乐文件
		if(!isset($_FILES['source'])){
			echo $_FILES['source'];
			$GLOBALS['error_message'] = '一定要输入音乐文件的哟';
			return;
		}
		$source = $_FILES['source'];
		if($source['error'] !== UPLOAD_ERR_OK){
			$GLOBALS['error_message'] = '请正确输入音乐文件哟';
			return;
		}
		//校验文件大小
		if($source['size']>10*1024*1024){
			$GLOBALS['error_message'] = '音乐文件过大';
			return;
		}
		if($source['size']<1*1024*1024){
			$GLOBALS['error_message'] = '音乐文件过小';
			return;
		}
		//校验文件类型
		$allow_sources = array('audio/mp3','audio/wma','audio/mpeg');
		//var_dump($source['type']);
		if(!in_array($source['type'],$allow_sources)){
			$GLOBALS['error_message'] = '不支持该音乐文件类型';
			return;
		}
		
		//尽量用绝对路径,使用相对路径文件移动后容易出错
		$taradu = '../unload/' . uniqid() . '-' . $source['name'];
		if(!move_uploaded_file($source['tmp_name'],$taradu)){
			$GLOBALS['error_message'] = '上传失败音乐文件哟';
			return;
		}
		$data['source'] = substr($taradu,2);
		//echo "ok";
		
		//文件都上传成功后,要把数据写入json中
		//读取data.json文件内容
		$json = file_get_contents('data.json');
		$old = json_decode($json, true);
		//把data数组追加到旧的数据中
		array_push($old, $data);
		//把整合后的数据重新编码为json格式的字符串
		$new_json = json_encode($old);
		//把json格式的字符串写入文件
		file_put_contents('data.json', $new_json);
		//跳转回到list.php主页面
		header('Location: list.php');
	}
	if($_SERVER['REQUEST_METHOD'] === 'POST'){
		add_music();
	}
?>

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
	<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" class="container" enctype="multipart/form-data" autocomplete="off">
		<h2>添加歌曲</h2>
		<hr />
		<div class="form-group bg-danger">
			<?php if($error_message != ''){ ?>
					<h><?php echo $GLOBALS['error_message'] ?></h>
			<?php }?>
		</div>
		<div class="form-group">
			<label for="title">请输入歌名</label>
			<input type="text" name="title" class="form-control" id = "title">
		</div>
		<div class="form-group">
			<label for="artist">请输入歌手</label>
			<input type="text" name="artist" class="form-control" id = "artist">
		</div>
		<div class="form-group">
			<label for="images">请上传海报</label>
			<input type="file" name="images[]" class="form-control" id = "images" multiple="multiple" accept="image/*">
		</div>
		<div class="form-group">
			<label for="source">请上传音乐</label>
			<input type="file" name="source" class="form-control" id = "source" accept="audio/*">
		</div>
		<button type="submit" class="btn btn-default">Submit</button>
	</form>	
</body>
</html>

第三步：删除操作（delete.php）
主要的思路为：在list.php主页面点击按钮时，通过url地址中的 ？传递数据，核心代码为：<a class="btn btn-danger" href="delete.php?id=<?php echo $item['id']; ?>">删除</a>。然后在delete.php页面通过$_GET(‘id’)来接收。
源代码delete.php如下：

<?php 
	if(empty($_GET['id'])){
		exit('<h1>缺少必须的参数</h1>');
	}
	$id = $_GET['id'];
	$data = json_decode(file_get_contents('data.json'),true);
	foreach($data as $item){
		if($item['id'] !== $id) continue;
		$index = array_search($item,$data);
		array_splice($data,$index,1);
		$json = json_encode($data);
		file_put_contents('data.json',$json);
	}
	header('Location: list.php');
?>

提醒：编码过程中遇到的小问题有，当读取物理路径的文件时，浏览器可能会有一个不能加载本地资源的问题，解决办法参考：https://blog.51cto.com/lindianli/1557510

小0鱼0儿
关注
基于VUE框架的网页音乐播放器（可自适应手机布局）
HarryPottey的博客
07-15 2105
该项目是大三上学期学VUE课程老师带我们做的一个项目，整个布局使用VUE框架，界面简洁，功能简单。apI是使用网易云音乐的API。 一、项目展示 二、项目代码 我使用的软件是VScode，该项目的代码布局分别如下所示： api主要是接入网易云提供的api，assets主要存放页面所需的图片及样式，base是放播放器和轮播图的布局及功能，components是各个功能组件布局及功能，router为设置各个组件的路径，store是为各个功能提供的相关方法，view为模块化的页面布局,App.vue则是
小小音乐符号flash动画
07-24
"小小音乐符号flash动画"就是一个这样的资源，它集合了一系列小型的音乐符号动画，适用于教学或者创作互动媒体项目。这个压缩包包含了三个文件：`flash8450.fla`、`flash8450.swf`以及`重要建议.txt`。 `flash8450....
网页音乐播放器
03-02
1、新版采用AS3.0编写在老版基础上升级而来，所以老版支持的功能新版同样支持（个别地方有所改动） 2、新版中增加了新的皮肤机制（设置更全更多更个性化） 3、新版缓存时间是2天（系统时间） 4、新版附带的JS文件也做了调整（播放WMA,RM音乐用的） 5、播放视频时切换屏幕由双击改为单击 播放器功能介绍 MP3、MP4、FLV、WMA、RM等文件的播放、暂停、停止、快进、快退、上一首、下一首 声音的控制（大小、声道） 视频大小的控制（4种模式） 播放模式（随机、循环、单曲） 大背景、场景图片及动画、皮肤 设置 歌词 支持修改文字 大小颜色 支持自定义播放器大小及坐标 支持分类列表及歌曲列表 支持数据xml文件加密 支持使用者增加及删除歌曲 支持音乐备用地址（2个） 支持快捷键 支持播放记忆（下次直接播放上次结束时的歌曲） 控制项、播放器主体颜色设置 自动读取百度，SOSO歌曲排行榜（需ASP支持） 自动读取SOSO歌曲地址（需ASP支持） 简单加歌 如：qq爱 s翼乐团$pk$（需ASP支持）
音乐网网页项目
01-16
音乐网网页项目使用DIV+CSS制作网页
【项目】在线音乐播放器测试报告
最新发布
日常学习记录、分享，愿我们都遇见更好的自己，与诸君共勉
09-24 2991
对音乐播放网站项目的测试，测试报告（功能测试、UI自动化测试、性能测试—）
音乐网站项目
05-11
jsp mysql structs 结构清晰的实用音乐网站 数据库用的是mysql
网页版-音乐播放器，可以下来玩玩
04-23
简单的网页音乐播放器，适合小白练习。文件包括html，原生js。
网页音乐播放器答辩PPT
06-04
网页音乐播放器的答辩ppt，里面主要包含了毕业答辩的一些具体答辩ppt流程
音乐符号动画素材：小小符号上浮的Flash展示
- “flash8450.swf”是一个Flash影片文件格式，是flash8450.fla源文件经过编译后的格式，可以在网页或Flash播放器中运行。SWF文件是最终用户看到的动画效果，不需要额外的软件即可播放。 “重要建议.txt”是文本...
构建音乐应用：使用HTML与Tailwind CSS
在音乐应用时风项目中，HTML被用来创建网页的框架，例如页面布局、音乐播放器的控件等。一个典型的HTML结构可能包括`<head>`部分，用于定义页面的元数据和标题；`<body>`部分，用于放置页面的主要内容，比如音乐...
开源的网页音乐播放器
12-08
开源的网页音乐播放器 Small (~4kb) Free, open-source No Flash knowledge required: file URL is specified in HTML JavaScript-ready! You may even bypass the Flash interface altogether! Autostart capability Draggable/Clickable seek bar Simple operation with Play/Pause and Stop buttons Buffering with progress bar Buffering is stoppable! (through Stop button) Volume control Very verbal Retries upon encountering errors
简易的php音乐播放器源码
07-02
简单的php音乐播放器代码，可以下载研究下。。。。。。
使用HTML5+Boostrap打造简单的音乐播放器
09-01
主要介绍了使用HTML5+Boostrap打造简单的音乐播放器 的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
基于jquery和bootstrap的音乐播放器插件vpplayer
12-10
vpplayer是一款基于jquery和bootstrap的音乐播放器插件。vpplayer音乐播放器小巧灵活，通过简单的配置即可在页面中生成漂亮的音乐播放器界面。
Vue框架和Axios实战：音乐播放器项目-音乐列表
qq_44771102的博客
06-08 483
调整项目结构，删除HelloWorld.vue组件及相关配置。components用于存放公共的组件页面，在src下新建pages文件夹用于存放页面组件。首先利用脚手架构建Vue项目（如：vueMusic），通过NPM安装Axios插件。利用目前流行的Vue框架和Axios进行跨域请求百度音乐接口、结合swiper来布局的比较综合性的前端项目。
网页播放器开发系列教程(一)
weixin_30784945的博客
01-10 406
（今天的教程我只是把开头和提纲列出来了，我会陆续补充完善开发教程，希望大家陆续关注） 各位朋友大家好，我是相信神话，从今天开始，我把最近开发的一个网页播放器，开发过程记录下来，希望与此感兴趣的朋友的朋友一起学习研究。也请大家多帮忙指教。 一、写在前面 有些东西写在前面，一边大家总体掌握开发的情况。这个播放器的从开始的美工，切图，开发全部是，我自己一个人开发的，虽然软件不大，但是麻雀虽小五脏俱...
音乐项目
wuke666666的博客
01-26 592
音乐项目 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using Sys...
vue3 web在线音乐项目——蔚蓝音乐 开发记录
weixin_52878347的博客
08-16 2392
想基于vue3技术独立开发一个前端项目，以前做过一个基于vue2和uniapp仿网易云音乐的微信小程序，于是想再做个web版的。前端菜鸡一枚，仅个人记录，项目存在一些布局问题和逻辑bug。只做了我觉得比较核心有趣的几个页面和功能，还有挺多东西可以完善的，等有时间可以慢慢把功能补齐。进度条和歌词滚动还有鼠标拖拽进度条和歌词进度没有实现，歌词滚动还存在一点问题，如果是歌放到一半再打开歌词界面，会从歌词第一句快速滚动到目标位置，不会直接就是正在唱的那句。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值