前端音乐播放：从原生 HTML 到 React 的奇妙之旅 🎵

呆呆的心
375 阅读3分钟

在前端开发中，实现音乐播放功能是一个常见需求。今天，我们将深入探讨如何在原生 HTML 和 React 中实现音乐播放，并结合代码进行详细解析。😎

1. 项目概述 📋

我们的项目主要围绕音乐播放功能展开，包含了原生 HTML 实现和 React 实现两种方式。项目的核心目标是让用户能够自主控制音乐的播放，避免自动播放带来的尴尬。📵

2. 原生 HTML 实现 📄

这是一个html，用于实现基本的音乐播放功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Audio 音乐</title>
</head>
<body>
    <audio src="./sounds/snare.wav"></audio>
    <button id="play">播放</button>
    <button onclick="alert('你还好吗?')">更原始的事件，如初恋般</button>
    <script>
        const oAudio = document.querySelector('audio');
        document.getElementById("play").addEventListener('click',() => {
            oAudio.play();
        })
    </script>
</body>
</html>

代码解析：

  • <audio> 标签：用于嵌入音频文件，src 属性指定了音频文件的路径。这里使用了相对路径 ./sounds/snare.wav，表示音频文件位于当前目录下的 sounds 文件夹中。🎵
  • <button> 标签：创建了两个按钮，一个用于播放音乐，另一个用于触发 alert 弹窗。
  • JavaScript 代码：使用 document.querySelector 方法获取 audio 元素，使用 document.getElementById 方法获取播放按钮元素。然后，使用 addEventListener 方法为播放按钮添加点击事件监听器，当点击按钮时，调用 oAudio.play() 方法播放音乐。🎶

注意事项：

  • 在原生 HTML 中，使用 document.querySelector 和 addEventListener 等 DOM API 来操作元素和绑定事件，这种方式在处理复杂的交互时可能会变得繁琐。🧐

3. React 实现⚛️

这是一个 React 组件，用于实现音乐播放功能。

import { useState,useRef } from 'react'
import './App.css'

function App() {
  // 火山引擎tts 配置文件
  const { VITE_TOKEN, VITE_APP_ID, VITE_CLUSTER_ID } = import.meta.env

  // 代码的可读性高于一切
  const [prompt,setPrompt] = useState('大家好，我是蔡徐坤');
  // react use 开头 ref hook 可以获取 DOM 元素
  const audioPlayer = useRef(null)
  console.log(audioPlayer,'/////');
  const playMusic = () => {
    // console.log(audioPlayer,'+++');
    console.log('play Music');
    audioPlayer.current.play()
  }

  const generateAudio = () => {
    // 女性
    // const voiceName = "zh_female_shuangkuaisisi_moon_bigtts";
    const voiceName = "zh_male_sunwukong_mars_bigtts"
    const endpoint = "/tts/api/v1/tts" // tts api llm 服务接口地址
    
    const headers = {
      'Content-Type':'application/json',
      Authorization:`Bearer;${VITE_TOKEN}`
    }
  }
  return (
    <div className='container'>
      <div>
        <label>Prompt</label>
        <button onClick={generateAudio}>生成并播放</button>
        <textarea
         className='input' 
         value={prompt}
         onChange={(e) => setPrompt(e.target.value)}
         >
         </textarea>
      </div>
      <audio ref={audioPlayer} src="/sounds/snare.wav"></audio>
      {/* <button onClick={playMusic}>播放</button> */}
    </div>
  )
}

export default App

代码解析：

  • 状态管理：使用 useState 钩子来管理 prompt 状态，prompt 初始值为 “大家好，我是蔡徐坤”。这样可以方便地更新和使用这个状态。🧠
  • 获取 DOM 元素：使用 useRef 钩子来获取 audio 元素的引用。useRef 返回一个可变的 ref 对象，其 .current 属性初始化为传入的参数（这里是 null）。通过 ref={audioPlayer} 将 ref 对象绑定到 audio 元素上，就可以在 playMusic 函数中通过 audioPlayer.current 来访问该元素并调用 play() 方法播放音乐。🤙
  • 事件处理：使用 onClick 事件处理程序来处理按钮点击事件。在 generateAudio 函数中，定义了语音合成的相关配置，如语音名称、API 接口地址和请求头。虽然该函数目前没有完整实现语音合成和播放的逻辑，但为后续扩展提供了基础。💪

4. 总结 📝

通过对比原生 HTML 和 React 实现音乐播放的方式，我们可以看到 React 在处理复杂交互和状态管理方面具有明显的优势。使用 useRef 钩子可以方便地获取 DOM 元素，避免了使用原生 DOM API 的繁琐。同时，React 的事件机制也提高了代码的可读性和可维护性。🎉

希望这篇文章能帮助你更好地理解前端音乐播放的实现方式，让我们一起在前端开发的道路上越走越远！🚀

avatar
文章
阅读
粉丝