前端设计与开发 课件 模块7 网页多媒体元素及应用.pptx

模块7网页多媒体元素及应用

制作音乐播放器网页

任务7.1

任务描述

随着互联网技术的飞速发展和移动设备的普及，用户对在线音乐播放的需求日益增长。为了满足用户的需求，HTML5作为现代网页开发的标准，提供了丰富的多媒体功能，其中audio标签可以直接在网页中播放音频文件，无须依赖插件。因此，利用HTML5技术制作音乐播放器网页，不仅可以满足用户随时随地欣赏音乐的需求，还可以借此机会锻炼和展示开发者的技术实力，同时顺应了Web技术发展的潮流。

任务分析

通过对本任务的学习，掌握嵌入音频和视频的基本语法和属性，掌握source标签的基本语法和属性，最后利用所学知识制作音乐播放器网页。

相关知识

7.1.1嵌入音频

音频如背景音乐，能营造网页氛围，影响用户感受。轻松音乐让人放松，紧张音轨适合活动推广

音频营造氛围

01

音频能够实现信息的多任务传递，如在听新闻、有声读物时，用户可在忙碌中获取知识

音频传递信息

02

音频能给予即时反馈和指导，如在教育平台用声音解释复杂概念，电商则用语音说明辅助产品描述，增强信息可及性

音频提供反馈指导

03

HTML5中引入了audio标签作为一种多媒体容器，使得在网页中嵌入音频内容变得简单。通过audio标签，用户可以直接在浏览器中播放音乐、声音片段等音频文件，而无须下载额外的播放器软件。

使用audio标签，网页可以提供丰富的音频体验，如背景音乐、播客、有声读物等。该标签支持多种音频格式，如MP3、WAV、OGG等，以确保音频在不同浏览器上的广泛兼容性和访问性。

7.1.2嵌入视频

视频通过动态呈现和情感连接，有效提升用户参与度，增强品牌记忆

视频提升用户参与度

HTML5中引入了video标签，这使得在网页中嵌入视频变得简单。与audio标签类似，video标签支持多种视频格式，如MP4、WebM等，确保了广泛的浏览器兼容性。它还提供了播放控制功能，包括播放、暂停、全屏等，使用户能够根据个人偏好控制视频播放。

7.1.3Source标签

source标签可以链接不同的媒体文件，如视频文件和音频文件等。其基本语法如下。

sourcesrc=...type=...

source标签通常与其他媒体标签（如video、audio和picture）一起使用，以便提供不同格式的备用媒体资源。

video/video或audio/audio标签中可以指定多个source元素，浏览器按source元素的顺序检测指定的视频/音频是否能够播放，如果不能播放（可能是格式不支持、文件不存在等），则换下一个，此方法多用于兼容不同的浏览器。

任务规划

利用HTML5技术开发一个功能完备、界面友好、用户体验优秀的音乐播放器网页，以此实现技术进步、内容传播和品牌形象塑造等多重价值。设计并实现一个具有良好用户体验的音乐播放器，包括但不限于歌曲列表展示、播放/暂停、上一曲/下一曲切换、音量控制、进度条拖拽等功能，让用户在浏览网页的同时享受到便捷的音乐播放服务。同时音乐播放器网页还可以方便地集成到各类网站或应用程序中，便于音乐内容的分发和分享，扩大音乐作品的影响力。

任务实施

（1）打开开发工具VSCode，在本地磁盘中新建项目文件夹，并命名为music。

（2）在VSCode中打开项目文件夹music，在该项目文件夹上右击，在弹出的快捷菜单中选择“新建文件”命令，在文本框中输入文件的名称“index.html”，然后按Tab键或Enter键完成HTML文件的创建。

（3）单击项目文件夹music下的index.html文件，进入代码编辑窗口。在title/title标签对中设置网页的标题为“精美音乐播放器”，并引入外部样式表，同时引入第三方图标库FontAwesome。

（4）在body/body标签对中添加一组div/div标签，用来放置音乐播放器，并设置好class。

（5）在音乐播放器div/div标签对中添加一组div/div标签对，作为播放器的头部,用来显示歌曲名称及作者相关信息。

（6）在音乐播放器div/div标签对中继续添加两组div/div标签对，分别放置播放器的控制按钮和时间显示部分，并设置好样式和属性。

任务实施

（7）最后在音乐播放器div/div标签对中添加audio/audio标签，并在audio/audio标签对中添加source标签，用来放置音频文件，并设置好相关属性，同时在项目文件夹music下新建文件夹audio，并将音频源文件放置在audio目录下。

（8）在body/body标签对中再次添加一组div/div标签，并在div/div标签对中插入video/video标签对，用于放置视频文件，同时将下载好的视频文件放置到audio目录下。

（9）在VSCode中打开项目