2024年Web前端最新HTML+CSS系列实战之音乐播放器实现,【面试必会】

react和vue的比较

相同
1)vitual dom
2)组件化
3)props,单一数据流

不同点
1)react是jsx和模板;(jsx可以进行更多的js逻辑和操作)
2)状态管理(react)
3)对象属性(vue)
4)vue:view——medol之间双向绑定
5)vue:组件之间的通信(props,callback,emit)

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

在开始写代码之前,我们需要先准备一个音频文件和一个视频文件以及若干图片,然后进行页面的布局。

话不多说,代码先行!!!

html文件为:(music.html)

<!doctype html>

音乐播放页面

浏览器不支持video标签

风中的麦浪

爱过的地方

当微风带着收获的味道

吹向我脸庞

想起你轻柔的话语
曾打湿我眼眶
嗯…啦…嗯…啦…
我们曾在田野里歌唱
在冬季盼望
却没能等到阳光下

css样式为:(music.css)

@charset “utf-8”;

/* CSS Document */

/清除浏览器默认样式/

*{

margin:0; padding:0;

}

/整体控制音乐播放界面/

#box-video{

width:100%;

height:100%;

position:absolute;

overflow:hidden;

}

/插入视频/

#box-video video{

position:absolute;

top:50%;

left:50%;

margin-left:-1350px;

margin-top:-540px;

}

/唱片部分/

.cd{

width:422px;

height:422px;

position:absolute;

top:25%;

left:10%;

z-index:2;

border-radius:50%;

border:10px solid #FFF;

box-shadow:5px 5px 15px #000;

background:url(images/cd_img.jpg) no-repeat;

}

.center{

width:100px;

height:100px;

background-color:#000;

最后

在面试前我花了三个月时间刷了很多大厂面试题,最近做了一个整理并分类,主要内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

  • HTML5新特性,语义化

  • 浏览器的标准模式和怪异模式

  • xhtml和html的区别

  • 使用data-的好处

  • meta标签

  • canvas

  • HTML废弃的标签

  • IE6 bug,和一些定位写法

  • css js放置位置和原因

  • 什么是渐进式渲染

  • html模板语言

  • meta viewport原理

ng)

  • 5
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供一些思路和方法。 首先,您需要选择一个音乐播放器的库或框架。一些常见的选择包括: 1. Howler.js: 一个现代 Web Audio JavaScript 库,可用于流畅的音频体验。 2. Wavesurfer.js: 一个用于音频可视化和波形图的 JavaScript 库。 3. MediaElement.js: 一个 HTML5 视频和音频播放器,支持自定义皮肤和扩展。 4. jPlayer: 一个用于创建音频和视频播放器的 jQuery 插件。 一旦您选择了一个库或框架,您可以开始编写代码来创建您的音乐播放器界面。以下是一个简单的示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>音乐播放器</title> </head> <body> <div id="player"> <audio src="song.mp3"></audio> <button id="play">播放</button> <button id="pause">暂停</button> <button id="stop">停止</button> <input id="volume" type="range" min="0" max="1" step="0.01" value="1"> </div> <script src="howler.min.js"></script> <script> var sound = new Howl({ src: ['song.mp3'] }); document.getElementById('play').addEventListener('click', function() { sound.play(); }); document.getElementById('pause').addEventListener('click', function() { sound.pause(); }); document.getElementById('stop').addEventListener('click', function() { sound.stop(); }); document.getElementById('volume').addEventListener('change', function() { sound.volume(this.value); }); </script> </body> </html> ``` 在这个示例中,我们使用了 Howler.js 库。我们创建了一个包含音频标签、播放、暂停、停止按钮和音量滑块的 div 元素。我们还在页面底部引入了 Howler.js 库,并使用 JavaScript 代码创建了 Howl 对象,然后将其绑定到按钮和滑块元素的事件上。 您可以根据自己的需要对此进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值