基于HTML5和CSS技术的音乐网站设计与实现

基于HTML5和CSS技术的音乐网站设计与实现

获取更好的阅读体验请访问：http://www.itbiyesheji.com/index.php/2019/04/23/基于html5和css技术的多媒体系统设计与实现/

功能需求

1. 登录：有一个用户，跳转到音频和视频两大功能列表
2. 再实现音频、视频里面各自实现的详细功能

音频要实现的功能：

1. 创建几个分类歌曲列表
2. 播放、暂停、自由切换歌曲、快进快退等功能
3. 可以删除音频、添加到指定列表
4. 能够自由拖拽自定义的多媒体文件的各个基本元素控件

视频要实现的功能：

1）创建几个分类歌曲列表

2）播放、暂停、自由切换视频、快进快退等功能

3）可以删除视频、添加到指定列表

4）能够自由拖拽自定义的多媒体文件的各个基本元素控件

开发语言：Java、HTML5、CSS

数据库：MySQL

1．目的与意义：

随着近年来WEB浏览器的发展，Android和IOS等系统在移动平台的兴起，视频和音频的点播已经由传统的PC端发展到移动端。传统的流媒体技术播放音频或者视频需要安装和加载FLASH插件等，非常麻烦，而HTML5的多媒体新标签可以很简便的实现音频视频的播放和编码解码功能。随着HTML5的出现，支持HTML5的WEB浏览器都支持对某些视频格式的传输，而这些视频格式传输容量低，视频图像质量也高。这个课题对于新世纪的多媒体传输有着很重大的意义。

与传统的流媒体技术相比有很多的优点如下几点：

(1)使用便捷

HTML5支持的视频编码器可以减少FLASH等插件的使用。

(2)灵活巧妙

相比传统的流媒体技术，HTML5和CSS技术将视频和音频的点播从PC端发展到了移动端。

(3)完善突破

HTML5可供选择的视频格式具有较高的数据压缩比率，视频压缩文件小。视频传输图像质量高，而且对于网络带宽的要求也不高。

2．国内外研究现状：

互联网用户已经告别了在网页里只能查看文本和图片的时代，网络视频使得网民的娱乐生活越来越多样化。说到网络直播，就绕不开流媒体技术。 伴随着行业的发展，近年来涌现了大量的以视频点播和视频直播为主要业务的网站，但网站内容趋于同质化。对于小型网站，为了能在激烈的竞争中取得优势，除了从视频内容方面创新，并进行有效的市场推广活动外，还应从技术和美观方面加以改进，以期增强用户体验来吸引用户。在这一方面，HTML5 和 CSS 带来了革命性的突破，并迅速成为近些年 Web 开发移动设备的热点。HTML5 标准涵盖了很多方面的内容，视频图像领域是 HTML5 标准中应用较 广的部分，如国外著名视频网站 Youtube 早在 2010年 1 月就实现了对 HTML5 多媒体技术的支持，实现了无插件播放。国内几大视频网站也都纷纷跟进，目前优酷土豆等主流网站也均实现了 PC 端和移动端（以APP的形式）对 HTML5 视频技术的支持。 虽然 HTML5 标准规范虽然至今还未正式出台，但是可以预见的是 HTML5 必将吸引越来越多的开发人员，各大主流浏览器厂家也均已经积极加入这一阵营中，HTML5 标准的全面普及已经越来越近。

课题研究内容：

论文的主要研究内容就是设计多媒体系统的整个控制及运行流程，并完成多媒体系统的用户模块、权限模块、素材模块、单元模块、节目模块、在线编辑模块、设备模块和传输模块的设计，最终能够稳定、方便的控制，以达到一个良好的效果。

（1）素材模块:研究在分布式的服务器架构下如何完成素材的同步更新的策略；

（2）权限模块:需要能够赋予适当的用户合适的权限，以管理相对应的模块。

（3）单元模块：要求对生成的多媒体文件的不同素材区域能够赋予相应用户权限，使得相应用户可以对其进行素材的更替；

（4）在线编辑模块：要求能够自由拖拽自定义的多媒体文件的各个基本元素控件，设计一个自定义的多媒体文件。

  本系统主要用到的相关技术：   本项目在开发过程中，主要用到HTML5、CSS、Java Script 等技术，然后通过 Phone Gap 调用移动设备 API。其中 HTML5和CSS 主要是完成界面的显示布局，Java Script 主要用于页面的逻辑实现，然后再引入 Phone Gap 库，让 Java Script 调用不同手机系统的相应的API，根据不同移动终端系统搭建相应环境进行测试。

课题研究的条件（材料、主要实验仪器设备等）： 开发工具：PC机；操作系统：Android和IOS； 3、浏览器：IE9.0及以上。

研究计划与进度安排： 第1周至第2周：阅读相关硕士论文并且了解论文课题背景，并撰写开题报告。 第3周至第4周：学习相关开发工具并且学习相关知识（HTML5技术、Javascript等知识）。 第5周至第7周：根据前期所获得相关文档进行整合，概括出系统的功能框架，迎接中期检查。 第8周至第10周：编写代码、搭建系统的总体框架。 第11周至第14周：通过pc工具调试、并测试系统安全性和可行性，准备各项相关材料，准备预答辩。 第15周至第16周：完善模型和论文，准备毕业设计答辩。