【demo】react+webpack音乐播放器

最新推荐文章于 2024-05-20 09:34:28 发布
最新推荐文章于 2024-05-20 09:34:28 发布
阅读量2.8k 收藏
点赞数 1
分类专栏： react webpack学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heyue_99/article/details/70048301
版权

使用react+webpack做了一个简单的音乐播放界面

使用H5的audio作为播放器

音乐播放时唱片图片顺时针旋转，音乐停止时图片也停止旋转

github:https://github.com/heyue-99/music-player



url-loader和file-loader 都是用于打包文件和图片

一般限制小图片转 base64 可以用 url-loader，其他情况都用 file-loader。
url-loader应该是file-loader上加了一层过滤。

比如：{ test: /\.(png|jpg)$/, loader:'url-loader?limit=8192'}

这样在小于8K的图片将直接以base64的形式内联在

最低0.47元/天 解锁文章
南太平洋_99
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
React Native 曲目播放器：完整指南
分享身边生活经验blog
04-12 1285
或者，您可以使用库来播放音乐并使用 JavaScript 自己处理播放列表——然后，您将必须为基于事件的整个播放列表队列实现编写代码。如果您计划使用 React Native 构建一个音频播放器，您无疑需要一个播放列表实现，其中包括一个可管理的音乐曲目队列，该队列对用户可见或作为后台服务运行以按特定顺序播放音乐曲目。为简单起见，在本教程中，我们将在我们的文件中开发所有组件，但请确保在开发生产级应用程序时将您的应用程序正确分解为单独的源文件。现在，我们将使用上述函数为我们的音乐播放器添加一个控制框。
React + webpack 路由组件 Demo
08-19
在本项目中，"React + webpack 路由组件 Demo" 是一个基于React框架和webpack构建工具的示例应用，展示了如何将React组件与webpack的路由功能结合使用，以实现前端单页应用（SPA）的基本架构。这个项目是可运行的，...
webpack常见的loader及其使用
weixin_44684357的博客
04-18 528
file-loader 对小型图片问价进行配置，配置完后再dist生成一串hash值命名的图片。如果想让生成的图片使用原来的名字，就使用[name].[ext] （name表示原始名称，ext表示原始后缀格式），或可以在名称后添加hash。如果想将图片放置在dist的images文件夹下，就使用 outputPath:‘images/’。 const path = require('path'); module.exports = { entry:{ main: './src/main.js', }
使用React做一个音乐播放器
zz130428的博客
12-25 1927
任何正在学习 React 并想使用 React 构建项目的人。有各种博客和文章可以为开发人员指导此类项目。我确实浏览过这些文章，但其中总是缺少一种项目。缺少的项目是音乐播放器和视频播放器。这两个项目都会让您有机会处理音频和视频。您将学到很多东西，例如处理播放和暂停音频的音频。今天，我们将在 React 中构建一个音乐播放器。设置环境播放/暂停音频音频处理时间（以当前时间和音频完整时长表示）为音频时间线添加范围滑块。
推荐项目：React Audio Player - 简洁的React音频播放器组件
最新发布
gitblog_00035的博客
05-20 516
推荐项目：React Audio Player - 简洁的React音频播放器组件 项目地址:https://gitcode.com/justinmc/react-audio-player 1、项目介绍 React Audio Player 是一个轻量级的React组件，它巧妙地封装了HTML5的<audio>标签，提供了一种方便的React接口来操作音频播放器并监听各种事件。这个库旨...
React H5项目使用video.js视频播放器
qq_36383583的博客
02-24 1190
react 使用video.js视频播放器
react项目 循环播放背景音乐
晴晴晴的博客
08-13 2986
代码简写 let audioArr; let audioIndex; export default class IndexLayout extends React.PureComponent { state = { audioUrl: '', }; componentDidMount() { this.getAudio(); } // 切换音乐 Chan...
react+redux+reactRouter+webpack+antd Demo
05-26
这个"react+redux+reactRouter+webpack+antd Demo"是一个综合性的项目，它展示了如何将这些技术有效地整合在一起，创建出一个功能完备的前端应用。 **React** 是一个由Facebook开发的用于构建用户界面的JavaScript...
jsonReact:React+Redux+Webpack+Antd的小Demo
05-14
React demo by tang 2017-02-15 使用React、Redux、Webpack、Babel（ES6）搭建的TODOS（任务列表）项目示例（脚手架），Webpack按development和production环境配置好了有关热更新、postcss、hash命名（缓存方案）、...
浅谈react+es6+webpack的基础配置
12-09
这是模块化开发、主流框架和最新版的ECMAScript语法规范的一个小demo 准备工作 安装 nodeJs 首先进入node官网，去下载最新版的nodeJs webpack 安装webpack npm install webpack -g 参数-g表示全局安装webpack，你在...
typescript+react+webpack+react-bootstrap搭建
06-29
自己参照搭建的简易demo，直接能跑，目前不含react-route和readx 具体参考文档如下 入门一 https://www.cnblogs.com/baqiphp/p/7647912.html 入门二 https://www.jianshu.com/p/71bbcdc8c1fc typescript配置说明 ...
react-jPlayer：用于ReactHTML5音频和视频播放器库
02-03
react-jPlayer 一个受插件启发但没有jQuery依赖关系的音频/视频播放器。 有关播放列表的功能，请参见 。 例子 安装 NPM npm install --save react-jplayer UMD 建议使用此软件包的方法是通过npm和webpack。 但是，如果您坚持手动添加.js和.css文件，则可以从/dist/文件夹获得未缩小版本和缩小版本。 该软件包的依赖关系已被UMD构建排除在外，因此您需要手动添加它们，如react-jPlayer-example的。 该模块将导出到名为ReactJPlayer的变量。 产品特点 与许多旧版Html5浏览器交叉兼容 完全
react-一个简易的React音乐播放器
08-15
Music player build by React 补充，后续更新 -- 项目在线演示地址：https://hfimy.github.io/react-musicplayer (请在谷歌浏览器预览） overview 注：更新后的项目代码放在gh-pages分支下 如何下载运行 git clone https://github.com/Hfimy/react-musicplayer.git
reactjs实例开发网易云音乐
01-11
reactjs实例开发网易云音乐!reactjs实例开发网易云音乐!reactjs实例开发网易云音乐!reactjs实例开发网易云音乐!reactjs实例开发网易云音乐!
react-music：基于React的在线音乐播放器（移动端高仿安卓网易云音乐）（替代是不可能的，这辈子都不会用hooks替换）
02-05
React-Music（2018.12.27） 高仿网易云音乐安卓客户端 API：一个开源的NodeJS （有api才有动力写！！！） 如何安装与使用 React音乐 # 下载 react-music git clone https://github.com/maomao1996/react-music.git # 进入 react-music 项目目录 cd react-music # 安装依赖 npm install # // 运行 react-music 访问 http://localhost:8163 npm run start # // 项目编译打包 npm run build 后台
audioPlayerReact:带有React的音频播放器
03-21
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESLin
基于react的录音及音频曲线绘制的组件开发
weixin_33947521的博客
08-26 1424
简介 演示地址 最近由于工作需要，需要在react上用到一个录音的功能，录音主要包含开始录音，暂停录音，停止录音，并将频谱通过canvas绘制出来。起初开发时找了一个现成的包，但是这个第三方的包不支持暂停功能，也不支持音频转码，只能输出audio/webm格式，所以自己在周末决定重新写一个关于react录音的插件。 使用 目前这个包已经...
React视频播放器
Web 开发&软件开发
08-05 3876
反应视频播放器 作为消费者和网络开发人员，流媒体娱乐是我的巨大兴趣。 我对流媒体娱乐的热爱可以追溯到RealPlayer的早期以及一百万个编解码器的痛苦。 快进到今天，我正在与ReactJS以及YouTube，Twitch，Facebook等数十种流技术进行大量合作。 这使我想到：是否有很好的开源组件来嵌入流行视频提供商的视频？ 让我们看看ReactPlayer ，这是一个非常简单但有用的...
基于react的audio组件
weixin_34032827的博客
12-12 4231
样式请自己定义哦~需要其他功能请自行添加！ // 组件调用 <Audio src={src地址} id={srcID}/> audio属性 src 歌曲的路径 preload 是否在页面加载后立即加载（设置autoplay后无效） controls 显示audio自带的播放控件 loop 音频循环 autoplay 音频加...
react + webpack
04-27
React是一种用于构建用户界面的JavaScript库，而Webpack是一个模块打包器，可以将JavaScript、CSS、图片等文件打包成静态文件。在使用React开发应用程序时，通常会使用Webpack来管理和打包应用程序的代码和资源。Webpack可以将React代码转换为浏览器可以理解的JavaScript，同时还可以使用各种插件和加载器来增强开发体验和构建效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值