如何用Vue3打造一个酷炫的音乐播放器

如何用Vue3构建一个交互式音乐播放器 本文由平台提供技术支持。 阅读详情

Alt

本文由ScriptEcho平台提供技术支持

项目地址:传送门

Spotify音乐卡片组件

应用场景

本代码用于构建一个类似于Spotify音乐播放器中的音乐卡片组件,可展示歌曲信息、控制播放、调节音量等功能。

基本功能

该音乐卡片组件主要包含以下功能:

  • **歌曲信息展示:**显示歌曲标题、艺术家名称和专辑封面。
  • **播放控制:**提供播放/暂停、上一曲、下一曲等控制按钮。
  • **音量调节:**允许用户通过滑动条调节音量。
  • **收藏:**用户可以点击心形图标将歌曲收藏到播放列表中。
  • **进度条:**显示歌曲的当前播放进度和总时长。

功能实现步骤及关键代码分析

1. HTML结构

该组件的HTML结构如下:

<template>
  <div class="card">
    <!-- 歌曲信息 -->
    <div class="top">
      <div class="pfp">
        <!-- 播放状态动画 -->
        <div class="playing">
          <div class="greenline line-1"></div>
          <div class="greenline line-2"></div>
          <div class="greenline line-3"></div>
          <div class="greenline line-4"></div>
          <div class="greenline line-5"></div>
        </div>
      </div>
      <div class="texts">
        <p class="title-1">Soldiers Rage</p>
        <p class="title-2">Tha Mechanic</p>
      </div>
    </div>

    <!-- 播放控制和音量调节 -->
    <div class="controls">
      <svg class="volume_button">...</svg>
      <div class="volume">...</div>
      <svg>...</svg>
      <svg>...</svg>
      <svg>...</svg>
      <div class="air">...</div>
      <svg class="heart">...</svg>
    </div>

    <!-- 进度条 -->
    <div class="song-time">
      <p class="timetext time_now">1:31</p>
      <div class="time">
        <div class="elapsed"></div>
      </div>
      <p class="timetext time_full">3:46</p>
    </div>
  </div>
</template>

2. 播放状态动画

播放状态动画使用@keyframes和animation属性实现。当播放时,绿色线条会以不同的延迟逐个缩放,模拟出播放的动效。

@keyframes playing {
  0% {
    transform: scaleY(0.1);
  }

  33% {
    transform: scaleY(0.6);
  }

  66% {
    transform: scaleY(0.9);
  }

  100% {
    transform: scaleY(0.1);
  }
}

.playing {
  animation: infinite playing 1s ease-in-out;
}

3. 音量调节

音量调节功能通过滑动条实现。当用户点击音量按钮时,音量调节控件会出现,用户可以通过拖动滑块调节音量。

<div class="volume">
  <div class="slider">
    <div class="green"></div>
  </div>
  <div class="circle"></div>
</div>

4. 进度条

进度条使用HTML5的range元素实现。当歌曲播放时,elapsed元素的宽度会随着当前播放时间变化而动态更新。

<div class="song-time">
  <p class="timetext time_now">1:31</p>
  <div class="time">
    <div class="elapsed"></div>
  </div>
  <p class="timetext time_full">3:46</p>
</div>

总结与展望

开发这个音乐卡片组件是一个有趣的经历,它让我了解了如何使用HTML、CSS和JavaScript来创建交互式且美观的UI组件。未来,我计划对该组件进行以下拓展和优化:

  • **响应式设计:**使组件在不同屏幕尺寸下都能正常显示。

  • **自定义主题:**允许用户更改组件的主题和颜色。

  • **播放列表支持:**添加一个播放列表功能,允许用户管理和播放歌曲列表。

  • **歌词显示:**集成歌词显示功能,让用户可以在播放歌曲时查看歌词。

    更多组件:

    在这里插入图片描述


    在这里插入图片描述

    获取更多Echos

    本文由ScriptEcho平台提供技术支持

    项目地址:传送门

    扫码加入AI生成前端微信讨论群:

扫码加入群聊

前端:音频可视化(H5+js版本) 前端可视化音频,H5+JS,复制粘贴换个音频链接就能用 阅读详情

相关推荐

突破Element-Plus限制:Swiper 11与Vue 3打造高密度卡片轮播实战

本文针对Element-Plus的el-carousel组件在高密度、强视觉场景下的不足,详细介绍了如何在Vue 3项目中集成Swiper 11,并利用其强大的Coverflow效果实现具有3D空间感和旋转木马效果的高密度卡片轮播。通过深度解析核心参数与实战配置,帮助开发者突破UI库限制,打造视觉冲击力强的交互组件。

weixin_29002595的博客 197

第七章 Electron Vue3实现音乐播放器

一个音乐播放器应该具备播放、暂停、上一首、下一首、播放模式(单曲循环、列表循环、顺序播放……)。除了这些比如还可以扩展进度条的展示、拖拽、音量大小的调节,如果资源允许的话可以进行一些歌词的展示等等。由于博主爬虫的资源没有合适的歌词,所以歌词这块功能暂时没有进行开发,感兴趣的小伙伴可以自行去完善。

Wait.End的博客 1万+

H5动感歌词实现:KRC解析与Uni-App音频同步技术详解

在Web前端开发中,音频处理与动态渲染是构建富媒体应用的核心技术。其原理涉及音频时间轴的精确控制、二进制数据解析以及高性能动画渲染。这些技术为在线音乐、语音交互等场景提供了关键支持,能显著提升用户体验。本文聚焦于KRC歌词格式的解密与解析,通过异或算法处理加密数据,并详细探讨了在Uni-App H5环境下,如何利用CSS3动画与音频事件同步,实现流畅的动感歌词效果,解决了移动端性能优化与跨端通信等工程难题。

weixin_30621711的博客 368

Vue3音乐播放器组件,可显示歌词

vue3音乐播放器组件,歌词滚动

qq_46083602的博客 3221

从零开始:用HTML、CSS和JavaScript打造一个酷炫的音乐播放器》 《前端新手必学:一步步构建现代化音乐播放页面(包含完整代码)》 《掌握前端基础:制作你的第一个音乐播放器网页(HTML+C

从零开始:用HTML、CSS和JavaScript打造一个酷炫的音乐播放器》 《前端新手必学:一步步构建现代化音乐播放页面(包含完整代码)》 《掌握前端基础:制作你的第一个音乐播放器网页(HTML+CSS+JS)》 《HTML+CSS+JavaScript入门:快速打造美观实用的音乐播放平台》 《超实用前端项目:用HTML、CSS和JavaScript开发音乐播放器》 《新手也能学会:创建一个动感十足的在线音乐播放器》 《从零到一:用前端技术构建一个完整的音乐播放页面》 《前端开发新手必看:打造简单而美观的

南北极之间 825

HTML5好看的音乐播放器多种风格(附源码)

HTML5好看的音乐播放器多种风格(附源码),好看的音乐播放器源码,酷炫音乐播放器源码,音乐随心听,三种风格布局,适合页面任何位置,常规播放风格,正常图片加文字,进度条,音量控制大小;纯图标播放,适用背景音乐;带歌词的播放器等三种风格,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。

不踩坑,不知道坑有多深;不总结,踩过的坑白踩。 3284

Vue音乐播放器组件开发实战:从零构建可视化音频应用

本文详细介绍了从零开始使用Vue3开发一个功能丰富的音乐播放器组件的完整实战过程。内容涵盖基础播放控制、音频可视化频谱实现、精准歌词同步滚动以及播放列表管理等核心功能,重点讲解了如何将Web Audio API、Canvas绘图与Vue的响应式系统优雅结合,并提供了性能优化与组件封装建议。

5b6n7m8的博客 288

2021最新Vue3打造一款音乐播放器 (源码).zip

2021最新Vue3打造一款音乐播放器 (源码)

学前端编程还没有做过项目?30个入门练手项目,你get了么?

不管我们要学习什么其实都是希望让自己做出“实际的东西”出,这个实际“实际的东西”其实说的就是做个项目,这不用多说大家都懂得。 这里小编我整理了30个web前端实战项目列表,你可以从中选择自己想做的项目进行参考学习练手,也可以从中寻找灵感去做自己的项目。 项目列表: 1.【HTML5 canvas龙卷风动画制作】 2.【js css3爱心表白背景特效】 3.【原生JS制作爱心表白代码】 4.【jQuery html5七夕表白放烟花动画特效】 5.【html5网页版小霸王游戏坦克大战】 .

weixin_45820912的博客 3257

第四章 自定义组件、动画

第三章 自定义组件、动画 (一)自定义View 1.1) onMeasure:对当前View的尺寸进行测量 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) widthMeasureSpec和heightMeasureSpec包含测量模式和尺寸大小 int widthMode = MeasureSpec....

Stay Hungry Stay Foolish 求知若饥 虚心若愚 8134

[原创]Linux 802.11n CSI tool安装教程(亲测可用)

Linux 802.11n CSI tool安装教程 前言 网上关于Intel5300 CSI tool的教程繁多,实际有效的可以说极少,各种疏漏错误。装的时候被坑无数次,终于调通。其实装这个工具并不太难,但是很多人把它弄得极其复杂,所以写这篇博客来帮助和我有一样困扰的人。我基本沿用的是官方文档旧版本的安装方案,针对其冗杂之处做了大量改进。 旧版安装教程: http://dhalperi....

u014645508的博客 4万+

基于WebSocket与AI辅助实现本地音乐播放器实时同步功能

WebSocket作为一种全双工通信协议,是实现实时网络应用的核心技术。它通过在单个TCP连接上提供双向通信通道,克服了传统HTTP轮询效率低、延迟高的问题,为实时数据同步提供了理想的底层支持。在工程实践中,WebSocket常与Socket.IO等库结合使用,后者提供了房间管理、自动重连和降级兼容等高级特性,极大地简化了开发复杂度。这项技术的核心价值在于能够构建低延迟、高响应的协作应用,例如在线文档编辑、实时游戏和多媒体同步等场景。本文聚焦于一个具体应用——为本地音乐播放器实现“一起听”功能,通过状态同步

weixin_34015336的博客 324

移动端抓包实战指南:从HTTPS解密到QUIC协议与证书绑定破解

HTTPS作为保障网络通信安全的核心协议,其工作原理基于TLS/SSL加密与证书信任链验证。在移动应用开发与测试中,抓包是调试接口、分析性能、排查问题的关键技术手段。然而,随着移动端安全性的提升,传统的代理抓包方法常因证书绑定、HTTP/3/QUIC协议等挑战而失效。这要求开发者掌握分层诊断思维,协同使用代理工具、协议分析工具及底层流量捕获工具。例如,面对证书绑定导致的流量不可见,需借助Wireshark进行协议层分析;针对基于UDP的QUIC协议,则需使用支持该协议的抓包工具或临时禁用特性。本文聚焦移动端

weixin_27722377的博客 299

3分钟网页变应用!PakePlus零代码打包神器实战指南

还在为复杂的Electron打包流程头疼吗?想将心爱的网页瞬间变成桌面应用却不知从何下手?今天我要为你揭秘一款革命性的网页打包工具——PakePlus,它能让任何网页、Vue、React项目在3分钟内华丽转身为轻量级桌面应用,大小不到5MB,性能却比Electron快10倍!🚀 ## 为什么选择PakePlus网页打包工具? PakePlus基于Rust Tauri2框架构建,是一个真正意义

gitblog_01118的博客 524

VS2019项目使用CGAL6.1配置教程详细步骤

在VS2019项目中使用CGAL详细步骤

插件开发 333

让openclaw接入web端的deepseek或着qwen,使用无限token

🪟 Windows: 提供原生的 PowerShell 一键安装支持!配置过程和官方版本是相同的,唯一的区别就是再选则model时要选择带Browser字样的deepseek或者qwen。安装之前需要先清理官方版本的安装痕迹,否则openclaw版本跳转不到这个中文版本。因为此版本与官方版本存在代差,在配置飞书时可能会出现无法安装飞书的情况。剩下的配置保持和官方版本一致操作即可。选中之后需要进行一次网页端的登录。登录后会出现可选择的model。安装完成后会跳到这个中文界面。涉及到接入飞书机器人的操作。

z1872385的博客 303

Astrolabe:为AI代码生成器打造实时SwiftUI预览引擎

在软件开发领域,实时预览与所见即所得(WYSIWYG)是提升开发效率、缩短反馈循环的核心技术。其原理在于建立代码与可视化界面之间的动态映射,通过解析抽象语法树(AST)和构建轻量级渲染引擎,实现代码变更到界面更新的即时同步。这项技术的核心价值在于将传统的“编写-编译-运行”长周期迭代,转变为即时、交互式的创作流程,极大地优化了UI设计、原型验证和快速迭代的体验。其典型应用场景包括前端开发、UI/UX设计以及低代码平台。本文介绍的Astrolabe项目,正是这一理念在AI编程助手领域的深度实践。它通过集成Sw

weixin_30808693的博客 412

多智能体强化学习算法【一】【MAPPO、MADDPG、QMIX】

近些年,多智能体强化学习(Multi-Agent Reinforcement Learning,MARL)取得了突破性进展,例如 DeepMind 开发的 AlphaStar 在星际争霸 II 中打败了职业星际玩家,超过了 99.8% 的人类玩家;OpenAI Five 在 DOTA2 中多次击败世界冠军队伍,是首个在电子竞技比赛中击败冠军的人工智能系统;以及在仿真物理环境 hide-and-seek 中训练出像人一样可以使用工具的智能体。我们提到的这些智能体大多是采用 on-policy 算法...

丨汀、的博客 9375

原生HTML/CSS/JS打造浪漫七夕表白与婚礼邀请函网页全攻略

在Web开发领域,HTML、CSS和JavaScript是构建一切网页应用的基石,它们分别负责结构、样式与交互,共同构成了现代网页的视觉与功能核心。理解这三者的协同工作原理,是前端开发者从入门到精通的必经之路。其技术价值在于,通过掌握这些原生技术,开发者能够脱离框架限制,实现极致的性能优化与完全的设计自由,从而创建出加载迅速、兼容性强的轻量级应用。这一技能在需要快速传播、强调第一印象和情感表达的场景中尤为重要,例如活动宣传、个人作品展示以及节日祝福页面。本文将聚焦于一个具体且充满温情的应用场景——制作专属的

weixin_33889665的博客 414

innovus:sroute 双层follow pin的做法

根据std cellpower pin的层次可以分成两种情况。

m0_61544122的博客 2733

YOLOv8改进 | Conv篇 | 利用YOLO-MS的MSBlock轻量化网络结构(既轻量又长点)

本文给大家带来的改进机制是利用YOLO-MS提出的一种针对于实时目标检测的MSBlock模块,我们将其用于C2f中组合出一种新的结构,来替换我们网络中的模块可以达到一种轻量化的作用,我将其用于我的数据集上实验,包括多个类别的数据集,其在轻量网络结构的同时,却能够提高一定的mAP精度,所以这是一种十分高效的模块,该网络结构非常适合那些模型精度已经无法提到,想要从轻量化模型的角度入手的读者使用。欢迎大家订阅本专栏,本专栏每周更新3-5篇最新机制,更有包含我所有改进的文件和交流群提供给大家。

Snu77的博客 6097

从零构建赛博像素风个人主站:全栈技术栈与风格实现详解

在现代Web开发中,个人主站已成为开发者展示技术能力和个性的重要载体。其核心原理是通过前端框架、样式方案和全栈架构的有机结合,构建兼具视觉表现力与功能完整性的数字空间。这一技术组合的价值在于,它不仅能高效实现复杂的UI效果和动态交互,还能确保良好的性能、可维护性和可访问性。在应用场景上,个人主站常被用于作品集展示、技术博客分享和个人品牌建设。本文以ZuSpaceX开源项目为例,深入剖析了如何利用React、Next.js、Styled-Components等技术栈,实现独特的赛博像素风格,并详细探讨了在性能

weixin_33701617的博客 309

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain&#39;s apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath(&#39;DeepLearnToolbox&#39;));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand(&#39;state&#39;,0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W&#39;); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand(&#39;state&#39;,0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = &#39;sigm&#39;;%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, &#39;Too big error&#39;);```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand(&#39;state&#39;,0)sae = saesetup([784 100]);sae.ae{1}.activation_function = &#39;sigm&#39;;sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)&#39;)% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;;nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, &#39;Too big error&#39;);```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x&#39;,28,28,60000))/255;test_x = double(reshape(test_x&#39;,28,28,10000))/255;train_y = double(train_y&#39;);test_y = double(test_y&#39;);%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you&#39;ll get around 1.2% errorrand(&#39;state&#39;,0)cnn.layers = { struct(&#39;type&#39;, &#39;i&#39;) %input layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 6, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %sub sampling layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 12, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, &#39;Too big error&#39;);```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, &#39;Too big error&#39;);%% ex2 neural net with L2 weight decayrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex3 neural net with dropoutrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex4 neural net with sigmoid activation functionrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex5 plotting functionalityrand(&#39;state&#39;,0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = &#39;softmax&#39;; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand(&#39;state&#39;,0)nn = nnsetup([784 20 10]); nn.output = &#39;softmax&#39;; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

Vue3自定义封装音频播放器

🚀 本片主要讲解如何使用Vue3去封装一个音频播放器,以及解决在ios微信浏览器中 无法获取音频时长问题。

前端阿皓 1811

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

如何用 Vue3 和 Element-Plus 打造一个交互式音乐播放器

如何用 Vue3 和 Element-Plus 打造一个交互式音乐播放器

NanChen的博客 2240

vue3+aplayer 做一个音乐播放器功能

父组件中调用:<a-player :data="record" />封装一个aplayer.vue的组件。下载:npm i aplayer。

qq_55681529的博客 2247

VUE3开箱即用的音频播放组件(基于原生audio)

注:我是使用unocss语法来编写css 如果项目没有搭载unocss 将其相应的转换为css即可。

cute_ming的博客 4527
上一篇: 如何用Vue3和inMap打造交互式地图可视化
下一篇: 如何用Vue3打造一个逼真的3D手机模型
ScriptEcho
博客等级 码龄3年 1304粉丝 150原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值