Web前端开发基础创新实践教程课件：制作TOP10音乐榜.pptxVIP

CreatingtheTOP10MusicChart制作TOP10音乐榜前端开发技术基础FundamentalsofWebFrontendTechnology

web前端技术基础1audio标签audiocontrolssourcesrc=audio.mp3loopautoplaypreload=autotype=audio/mpeg您的浏览器不支持该音频类型/audiocontrols：显示音频控制器，如播放、暂停、音量控制等。autoplay：自动播放音频。loop：循环播放音频。preload：指定在页面加载时是否预加载音频。可选值有none、metadata、auto。audio标签常用属性：

web前端技术基础示例divh2默认播放控件/h2audiosrc=music/bj.mp3controls/audioaudioid=sjmhcontrols sourcesrc=music/bj.mp3type=audio/mpeg sourcesrc=music/bj.wavtype=audio/wav sourcesrc=music/bj.oggtype=audio/ogg/audio/div

web前端技术基础经验小贴士音频标签audio具有多种状态，用于监控音频的播放、暂停等状态以及获取有关音频的信息，如：paused（表示音频是否处于暂停状态）、ended（表示音频是否已经播放完毕）、duration（表示音频的总时长）、currentTime（表示当前播放的时间位置）；Volume（表示音频的音量，范围从0.0（静音）到1.0）。audio标签提供了一些方法，用于控制音频的播放、暂停以及获取音频的信息。play()方法启动播放音频；pause()方法暂停音频的播放；load()方法重新加载音频；canPlayType(type)方法用于检查浏览器是否可以播放指定类型的音频，它接受一个MIME类型字符串作为参数，并返回probably、maybe或来表示浏览器是否支持该类型。FontAwesome是一个流行的图标字体库，用于在网站中添加矢量图标。可以通过两种方式引入，其一是通过CDN外部链接方式引入，其二是下载相应版本文件到本地，从本地引入。123

web前端技术基础任务实践使用HTML和CS创建页面布局和样式，展示TOP10音乐排行。鼠标移动到任意一首音乐上时，在右侧出现播放按钮，鼠标移出时隐藏播放按钮。用JavaScript实现音乐播放的切换，使用font-awesome库实现播放图标加载，实现自定义的音乐播放和暂停控件。整体页面效果如图6-2所示。任务要求

谢谢观看FundamentalsofWebFrontendTechnology前端开发技术基础CreatingtheTOP10MusicChart