用React做一个音乐播放器

news2024/11/20 1:43:11

介绍

任何正在学习 React 并想使用 React 构建项目的人。有各种博客和文章可以为开发人员指导此类项目。我确实浏览过这些文章，但其中总是缺少一种项目。缺少的项目是音乐播放器和视频播放器。这两个项目都会让您有机会处理音频和视频。您将学到很多东西，例如处理播放和暂停音频的音频。

今天，我们将在 React 中构建一个音乐播放器。我们将研究以下主题：

  • 设置环境
  • 播放/暂停音频
  • 音频处理时间（以当前时间和音频完整时长表示）
  • 为音频时间线添加范围滑块

完成该项目后，我们的音乐播放器将如下所示。

如果这让您兴奋，那么让我们开始吧。

先决条件和设置环境

我假设您具备以下技术知识作为先决条件：

  • JavaScript
  • HTML/CSS
  • 基础反应

环境设置很简单。您应该预先安装node.js以便在终端中运行与节点相关的命令。

导航到要在其中创建项目的目录。现在，运行终端并输入以下命令来安装 React 项目。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">npx</span> <span style="color:var(--syntax-declaration-color)">create</span><span style="color:var(--syntax-name-color)">-react-app </span><span style="color:var(--syntax-declaration-color)">react</span><span style="color:var(--syntax-name-color)">-music-player
</span></code></span></span>

删除所有样板文件和不必要的代码。我们现在可以开始了。

依赖关系

我们需要将以下库安装到我们的项目中：

  • 使用声音：这将处理音频文件。它将加载、播放和暂停音频以及其他功能。

使用以下命令安装：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">npm</span> <span style="color:var(--syntax-declaration-color)">i</span> <span style="color:var(--syntax-declaration-color)">use</span><span style="color:var(--syntax-name-color)">-sound
</span></code></span></span>
  • react-icons：用于将播放、暂停、下一个和上一个图标添加到我们的播放器中。

使用以下命令安装它：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">npm</span> <span style="color:var(--syntax-declaration-color)">i</span> <span style="color:var(--syntax-declaration-color)">react</span><span style="color:var(--syntax-name-color)">-icons
</span></code></span></span>

播放器.js

在文件夹中创建一个component目录src。在其中创建一个名为Player.js. 这个组件将是我们的音乐播放器。

进口

根据要在文件中导入的库。您可以在这里查看：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">useEffect</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">useState</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span> 
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">useSound</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">use-sound</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-comment-color)">// for handling the sound</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">qala</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">../assets/qala.mp3</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-comment-color)">// importing the music</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">AiFillPlayCircle</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">AiFillPauseCircle</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react-icons/ai</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-comment-color)">// icons for play and pause</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">BiSkipNext</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">BiSkipPrevious</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react-icons/bi</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-comment-color)">// icons for next and previous track</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">IconContext</span> <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">react-icons</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-comment-color)">// for customazing the icons</span>
</code></span></span>

您可以查看评论以了解导入的解释。

播放和暂停音频

让我们实现正在播放和暂停音频的播放器的强制性功能。

在顶部，我们有一个isPlaying用于存储玩家当前状态的状态。这将有助于根据播放器的状态有条件地呈现播放/暂停图标。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">isPlaying</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setIsPlaying</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useState</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">);</span>
</code></span></span>

我们需要useSound用音频初始化。它将返回播放、暂停、持续时间和声音方法。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">play</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">pause</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">duration</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">sound</span> <span style="color:var(--syntax-text-color)">}]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useSound</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">qala</span><span style="color:var(--syntax-text-color)">);</span>
</code></span></span>

playpause用于播放和暂停音频。duration是以毫秒为单位的轨道长度。sound将为我们提供声音的howler.js方法。

创建一个函数来处理播放和暂停按钮。这是它的代码。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">playingButton</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">isPlaying</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">pause</span><span style="color:var(--syntax-text-color)">();</span> <span style="color:var(--syntax-comment-color)">// this will pause the audio</span>
      <span style="color:var(--syntax-name-color)">setIsPlaying</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">);</span>
    <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">else</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">play</span><span style="color:var(--syntax-text-color)">();</span> <span style="color:var(--syntax-comment-color)">// this will play the audio</span>
      <span style="color:var(--syntax-name-color)">setIsPlaying</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">true</span><span style="color:var(--syntax-text-color)">);</span>
    <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-text-color)">};</span>
</code></span></span>

现在，是时候将播放器的 UI 组件添加到return. 这是它的代码。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"component"</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h2</span><span style="color:var(--syntax-text-color)">></span>Playing Now<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h2</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">img</span>
        <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"musicCover"</span>
        <span style="color:var(--syntax-name-color)">src</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"https://picsum.photos/200/200"</span>
      <span style="color:var(--syntax-text-color)">/></span>
      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h3</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"title"</span><span style="color:var(--syntax-text-color)">></span>Rubaiyyan<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h3</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">p</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"subTitle"</span><span style="color:var(--syntax-text-color)">></span>Qala<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">button</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"playButton"</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">IconContext</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Provider</span> <span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">size</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">3em</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">color</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">#27AE60</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
            <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">BiSkipPrevious</span> <span style="color:var(--syntax-text-color)">/></span>
          <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">IconContext</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Provider</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">button</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-error-color)">!</span><span style="color:var(--syntax-name-color)">isPlaying</span> <span style="color:var(--syntax-text-color)">?</span> <span style="color:var(--syntax-text-color)">(</span>
          <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">button</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"playButton"</span> <span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">playingButton</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
            <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">IconContext</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Provider</span> <span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">size</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">3em</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">color</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">#27AE60</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
              <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">AiFillPlayCircle</span> <span style="color:var(--syntax-text-color)">/></span>
            <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">IconContext</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Provider</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">button</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">(</span>
          <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">button</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"playButton"</span> <span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">playingButton</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
            <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">IconContext</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Provider</span> <span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">size</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">3em</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">color</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">#27AE60</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
              <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">AiFillPauseCircle</span> <span style="color:var(--syntax-text-color)">/></span>
            <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">IconContext</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Provider</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">button</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)">)</span><span style="color:var(--syntax-string-color)">}</span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">button</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"playButton"</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">IconContext</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Provider</span> <span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">size</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">3em</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">color</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">#27AE60</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span><span style="color:var(--syntax-text-color)">></span>
            <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">BiSkipNext</span> <span style="color:var(--syntax-text-color)">/></span>
          <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-name-color)">IconContext</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">Provider</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">button</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
    <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
  <span style="color:var(--syntax-text-color)">);</span>
</code></span></span>

对于封面图片，我使用Loren Picsum生成随机图像。

您可以在此处查看文件的 CSS：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)">body</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">background-color</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">#e5e5e5</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-name-color)">.App</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">font-family</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">sans-serif</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">text-align</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">center</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-name-color)">.component</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">background-color</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">white</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">25%</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">max-width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">600px</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">margin</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1em</span> <span style="color:var(--syntax-text-color)">auto</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">padding-bottom</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">2em</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">border</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">0.1px</span> <span style="color:var(--syntax-text-color)">solid</span> <span style="color:var(--syntax-declaration-color)">black</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">border-radius</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">10px</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-name-color)">.musicCover</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">border-radius</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">10%</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-name-color)">.playButton</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">background</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">none</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">border</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">none</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">align-items</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">center</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">justify-content</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">center</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-name-color)">.subTitle</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">margin-top</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">-1em</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">color</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">#4f4f4f</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-name-color)">.time</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">margin</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">0</span> <span style="color:var(--syntax-text-color)">auto</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">80%</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">display</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">flex</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">justify-content</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">space-between</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">color</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">#828282</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">font-size</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">smaller</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-name-color)">.timeline</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">80%</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">background-color</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">#27ae60</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-error-color)">input</span><span style="color:var(--syntax-error-color)">[</span><span style="color:var(--syntax-error-color)">type</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"range"</span><span style="color:var(--syntax-error-color)">]</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-text-color)">background-color</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">#27ae60</span><span style="color:var(--syntax-text-color)">;</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-declaration-color)">@media</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-text-color)">max-width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">900px</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">.component</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-text-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">50%</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>
</code></span></span>

运行反应服务器。如果一切顺利，您将能够看到下面的屏幕。

单击播放按钮播放音频。

使用音频的当前时间和持续时间添加音频时间线

现在，让我们将时间轴添加到播放器。时间线将由用户控制。对其进行任何更改都会更改音频的当前位置。

让我们看看我们正在使用的状态。您会看到对每个状态的解释的注释。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">currTime</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setCurrTime</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useState</span><span style="color:var(--syntax-text-color)">({</span>
    <span style="color:var(--syntax-name-color)">min</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">sec</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">});</span> <span style="color:var(--syntax-comment-color)">// current position of the audio in minutes and seconds</span>

  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">seconds</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">setSeconds</span><span style="color:var(--syntax-text-color)">]</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">useState</span><span style="color:var(--syntax-text-color)">();</span> <span style="color:var(--syntax-comment-color)">// current position of the audio in seconds</span>
</code></span></span>

我们正在从useSound. 由于持续时间以毫秒为单位提供，我们已将其转换为分钟和秒。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">useEffect</span><span style="color:var(--syntax-text-color)">(()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">sec</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">duration</span> <span style="color:var(--syntax-error-color)">/</span> <span style="color:var(--syntax-literal-color)">1000</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">min</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">Math</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">floor</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">sec</span> <span style="color:var(--syntax-error-color)">/</span> <span style="color:var(--syntax-literal-color)">60</span><span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">secRemain</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">Math</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">floor</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">sec</span> <span style="color:var(--syntax-error-color)">%</span> <span style="color:var(--syntax-literal-color)">60</span><span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">time</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">min</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">min</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">sec</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">secRemain</span>
  <span style="color:var(--syntax-text-color)">};</span>
</code></span></span>

现在，对于音频的当前位置，我们有了sound.seek([])方法。我们每秒都在运行这个函数来改变音频的当前位置。在获得以秒为单位的音频位置后。我们将其转换为分钟和秒。转换后，我们用当前值设置状态。这是它的代码。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-name-color)">useEffect</span><span style="color:var(--syntax-text-color)">(()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">interval</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">setInterval</span><span style="color:var(--syntax-text-color)">(()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">sound</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">setSeconds</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">sound</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">seek</span><span style="color:var(--syntax-text-color)">([]));</span> <span style="color:var(--syntax-comment-color)">// setting the seconds state with the current state</span>
        <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">min</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">Math</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">floor</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">sound</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">seek</span><span style="color:var(--syntax-text-color)">([])</span> <span style="color:var(--syntax-error-color)">/</span> <span style="color:var(--syntax-literal-color)">60</span><span style="color:var(--syntax-text-color)">);</span>
        <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">sec</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-text-color)">Math</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">floor</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">sound</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">seek</span><span style="color:var(--syntax-text-color)">([])</span> <span style="color:var(--syntax-error-color)">%</span> <span style="color:var(--syntax-literal-color)">60</span><span style="color:var(--syntax-text-color)">);</span>
        <span style="color:var(--syntax-name-color)">setCurrTime</span><span style="color:var(--syntax-text-color)">({</span>
          <span style="color:var(--syntax-name-color)">min</span><span style="color:var(--syntax-text-color)">,</span>
          <span style="color:var(--syntax-name-color)">sec</span><span style="color:var(--syntax-text-color)">,</span>
        <span style="color:var(--syntax-text-color)">});</span>
      <span style="color:var(--syntax-text-color)">}</span>
    <span style="color:var(--syntax-text-color)">},</span> <span style="color:var(--syntax-literal-color)">1000</span><span style="color:var(--syntax-text-color)">);</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">clearInterval</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">interval</span><span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-text-color)">},</span> <span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">sound</span><span style="color:var(--syntax-text-color)">]);</span>
</code></span></span>

现在返回。这是代码。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"time"</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>
            <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">currTime</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">min</span><span style="color:var(--syntax-string-color)">}</span>:<span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">currTime</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">sec</span><span style="color:var(--syntax-string-color)">}</span>
          <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>
            <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">time</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">min</span><span style="color:var(--syntax-string-color)">}</span>:<span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">time</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">sec</span><span style="color:var(--syntax-string-color)">}</span>
          <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">input</span>
          <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"range"</span>
          <span style="color:var(--syntax-name-color)">min</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"0"</span>
          <span style="color:var(--syntax-name-color)">max</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">duration</span> <span style="color:var(--syntax-error-color)">/</span> <span style="color:var(--syntax-literal-color)">1000</span><span style="color:var(--syntax-string-color)">}</span>
          <span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"0"</span>
          <span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">seconds</span><span style="color:var(--syntax-string-color)">}</span>
          <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"timeline"</span>
          <span style="color:var(--syntax-name-color)">onChange</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
            <span style="color:var(--syntax-name-color)">sound</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">seek</span><span style="color:var(--syntax-text-color)">([</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">target</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">]);</span>
          <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span>
        <span style="color:var(--syntax-text-color)">/></span>
      <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
</code></span></span>

范围输入的值是second状态。它将为我们提供音频的当前位置。在用户更改范围时。我们正在调用该soud.seek()方法来更改音频的当前位置。

输出

成功完成项目后，您将能够看到以下输出。

动图

注意：音乐正在进入我的扬声器。

我创建了一个codesandbox。您可以查看它以获得包含代码和输出的完整项目。

注意：我使用的歌曲是Qala的Rubaaiyaan。一切归功于创作者。

附加的功能

您可以在音乐播放器上添加更多功能，例如：

  • 它目前播放一首歌曲并加载多首歌曲。使用下一个和上一个图标来更改音频。
  • 根据歌曲更改音频的名称和专辑。
  • 添加更多您希望音乐播放器应具备的功能。

结论

我们已经创建了自己的音乐播放器。该项目将帮助您在 React 中处理音频文件。我们在函数中添加了播放和暂停功能。还添加了带有范围输入的音频时间线。用户可以使用时间线更改音频的当前位置。随意向项目添加更多功能。

我希望这个项目能帮助你理解在 React 中处理音乐的方法。如果您也想要视频播放器教程，请在评论中告诉我。感谢您阅读博文。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/106622.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux学习-97-vmware网络桥接模式配置和vmware快照操作

Linux学习-97-vmware网络桥接模式配置和vmware快照操作

19.3 vmware网络桥接模式配置 桥接&#xff1a;需要保证Linux虚拟机和本机处在同一个网段&#xff01; #win平台输入ipconfig查看主机的ip地址Linux也必须要配置到对应的网段 桥接模式&#xff1a;主机ip 和虚拟机ip映射到同一块物理网卡&#xff08;光纤&#xff0c;无线…
阅读更多...
达梦数据库-centos7安装

达梦数据库-centos7安装

参考官方文档 1.环境 操作系统CPU数据库CentOS7x86_64dm8_20221121_x86_rh6_64.iso 2.安装前准备 2.1 关闭防火墙 或 开放5236端口 # 关闭防火墙 systemctl stop firewalld systemctl disable firewalld # 开放5236端口&#xff08;推荐使用&#xff09; firewall-cmd --pe…
阅读更多...
TYPE A USB2.0电路设计

TYPE A USB2.0电路设计

TYPE A USB2.0连接器可以分为公座和母座&#xff0c;放在供电端PCB板上的一般是母座&#xff0c; 2.0的母座有四个信号引脚。今天就来和大家分享下TYPE A USB2.0的板级电路设计&#xff0c; 首先来看到 TYPE A USB2.0四个引脚的信号定义&#xff0c;1脚是VBUS&#xff0c;需要…
阅读更多...
Kafka系列之入门(荣耀典藏版)

Kafka系列之入门(荣耀典藏版)

目录 一、为什么要用消息中间件&#xff1f; 1、异步处理 2、应用解耦 3、流量削峰 4、日志处理 二、为什么选择Kafka&#xff1f; 消息中间件的编年史 1、Kafka的外在表现和内在设计 2、市场主流消息中间件对比 三、Kafka中的基本概念 1、消息和批次 2、主题和分区…
阅读更多...
【笔记：模拟CMOS集成电路】两级运算放大器设计与仿真（带版图）

【笔记：模拟CMOS集成电路】两级运算放大器设计与仿真（带版图）

【笔记&#xff1a;模拟CMOS集成电路】两级运算放大器设计与仿真&#xff08;带版图&#xff09;前言1.电路分析1.1电路结构电路描述&#xff1a;1.2小信号分析1.3公式2指标设计2.1预期设计指标参数2.2参数分析(1)确定gm1、gm6(2)分配电流(3)确定M1尺寸(4)确定M6尺寸(5)共模输入…
阅读更多...
学习.NET MAUI Blazor（二）、MAUI是个啥

学习.NET MAUI Blazor（二）、MAUI是个啥

随着.NET 7的发布&#xff0c;MAUI也正式发布了。那么MAUI是个啥&#xff1f;我们先来看看官方解释&#xff1a; .NET 多平台应用 UI (.NET MAUI) 是一个跨平台框架&#xff0c;用于使用 C# 和 XAML 创建本机移动和桌面应用。 目录关于MAUIMAUI的工作原理如何开发MAUI该如何选择…
阅读更多...
5万字企业数字化运营管理平台软件开发框架项目技术方案

5万字企业数字化运营管理平台软件开发框架项目技术方案

目录 1 项目总体概述 项目总体技术方案保障 系统设计 系统体系结构设计 系统指标保障 系统质量 系统健壮性 系统应具备安全性 系统易用性 系统可维护性 系统完备性 系统可扩展性 系统可测试性 系统可移植性 系统可追踪性 系统易安装性 2 项目技术方案 2.1 系统…
阅读更多...
没有的博客1

没有的博客1

我虽不善言辞 但关于爱你 我无法掩饰 关于我爱你音频&#xff1a;00:0004:55 | 01 | 愿你们是渣的那一方 背负所有骂名愉快生活 而不是在深夜痛哭 辗转反侧茶饭不思 做一个痛苦的好人 | 02 | 昨晚喜欢的男孩子发了新女友的照片 很难过 做个大人真好啊 十分钟就能让自…
阅读更多...
Linux上RabbitMQ安装使用

Linux上RabbitMQ安装使用

文章目录安装安装erlang安装rabbitMQ管理指令安装 官网 由于需要对应erlang和rabbitMQ两者版本的关系&#xff0c;先确定好下载哪个版本&#xff0c;版本关系表&#xff0c;以下教程以Erlang 23.3.4.11和RabbitMQ 3.9.14为例 安装erlang 略&#xff0c;进入对应版本下载安装…
阅读更多...
【YApi接口管理平台】在Linux上使用Docker搭建YApi (亲测完美运行)

【YApi接口管理平台】在Linux上使用Docker搭建YApi (亲测完美运行)

本期目录前言1. 创建MongoDB容器数据卷2. 安装Node.js3. 拉取MongoDB镜像4. 启动Mongo容器5. 拉取YApi镜像6. 初始化YApi7. 运行YApi容器8. 访问前言 博主想在自己的 Linux 虚拟机上使用 Docker 搭建 API 接口管理平台来团队开发一个项目&#xff0c;跟着网上的教程硬是装了好…
阅读更多...
Unreal Engine的编译类型和命名规则

Unreal Engine的编译类型和命名规则

目录 编译类型 命名规则 资源命名规则 文件夹命名规则 编译类型 debug game只能调试你的项目&#xff0c;不能调试编辑器项目 多加了一个editor&#xff0c;就可以调试编辑器了。 不同的编译类型可以理解为引擎在不同的类型下的监管程度&#xff0c;用以不同的场景 Te…
阅读更多...
树莓派驱动水星无线网卡（MW150UH）教程指南

树莓派驱动水星无线网卡（MW150UH）教程指南

目录 1.树莓派版本 2.无线网卡 查询无线网卡 1.如果为 Bus 001 Device 005: ID 0bda:b711 Realtek Semiconductor Corp. RTL8188GU 802.11n WLAN Adapter (After Modeswitch) 2.如果为 Bus 001 Device 007: ID 148f:7601 Ralink Technology, Corp. MT7601U Wireless Adapte…
阅读更多...
深度学习计算广告（更新中）

深度学习计算广告（更新中）

本文转自王喆的《深度学习计算广告》&#xff0c;仅用于学习。 文章目录一、计算广告系统简介二、经典的广告系统架构三、dl时代广告系统各模块技术演进1. Ad Ranking - 从大刀阔斧的革命到精雕细琢的改进&#xff08;1&#xff09;模型发展图&#xff08;2&#xff09;张俊林&…
阅读更多...
STL之list模拟实现

STL之list模拟实现

list常识 list迭代器不支持【】&#xff0c;所以不支持随机访问。也不支持>、<&#xff0c;没有意义&#xff0c;因为iterator是地址&#xff0c;地址并不连续。 重要的说三遍&#xff1a; list不支持随机访问&#xff0c;因为没有重写[]。 list不支持随机访问。 list不…
阅读更多...
vue3+ts项目 笔记总结

vue3+ts项目 笔记总结

一、首先得先建好vue3ts的项目&#xff1a; 在终端新建项目输入&#xff1a;vue create vue3-ts接下来的每一步如图所示&#xff1a;注意要通过空格选中TypeScript二、项目建好后&#xff0c;开始正常的开发&#xff0c;注意区分vue2与vue3的区别&#xff1a; 在vue3项目中不…
阅读更多...
移动设备软件开发-Spape详解

移动设备软件开发-Spape详解

Spape详解 1.自定义背景shape 1.1gradient 1.简介 定义渐变色&#xff0c;可以定义两色渐变和三色渐变&#xff0c;及渐变样式&#xff0c;它的属性有下面几个2.属性 angle&#xff0c;只对线性渐变是有效的放射性渐变必须指定放射性的半径&#xff0c;gradientRadiouscentetX和…
阅读更多...
（一）汇编语言——基础知识

（一）汇编语言——基础知识

目录 基础知识 总线 地址总线 数据总线 控制总线 内存地址空间 总结 今天我们就开始学习有关汇编的相关知识了&#xff0c;感觉和之前学的STM32相类似&#xff0c;所以学习起来并没有感觉很困难&#xff0c;相反&#xff0c;感觉有点好玩&#xff0c;并且理解了底层原理…
阅读更多...
网络技术期末复习~重点考题

网络技术期末复习~重点考题

解题思路&#xff1a; 标准答案&#xff1a; 11. 如图所示&#xff0c;网络145.13.0.0/16划分为四个子网N1,N2,N3,N4。它们与路由器R相连的接口分别是m0,m1,m2,m3,R的第五个接口m4连接到互联网路由器&#xff08;接口地址为1.1.1.1&#xff09;。 (1)请给出路由器R的路由表。 …
阅读更多...
Anaconda+VSCode+QT Designer配置PyQt5环境

Anaconda+VSCode+QT Designer配置PyQt5环境

AnacondaVSCodeQT Designer配置PyQt5环境 本文使用AnacondaVSCode配置PyQt5环境&#xff0c;在开始之前新建Anaconda的虚拟环境&#xff0c;如果不需要虚拟环境可以直接使用默认的Base环境。另外针对ui文件转py文件报错ImportError: DLL load failed: 找不到指定的模块给出了解…
阅读更多...
D3D11和Vulkan共享资源 (二) - 和Intel MediaSDK sample_decode 集成

D3D11和Vulkan共享资源 (二) - 和Intel MediaSDK sample_decode 集成

转过头再找个复杂的播放程序验证一下&#xff0c;还是用我比较熟悉的MediaSDK的播放程序。基本思路就是 在初始化解码输出显示的窗口的时候同时也初始化一个vulkan显示的窗口初始化d3d11设备的时候初始化vulkan, 同时多创建一个D3D11Texture2D的共享纹理最后在MSDK每个frame在…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023