现场广播的音频 html 标签答案

【问题标题】：Audio html tag for live radio现场广播的音频 html 标签
【发布时间】：2023-02-03 06:10:49
【问题描述】：

我需要实时的音频播放器。

当前问题：当我给出命令 audio.pause() 然后 audio.play() 时，播放器从它停止的地方返回并且不存在。

有人能帮我吗？我正在使用与 vite 的反应。

实际代码：

import { useState } from "react";

import {
  FaPlay,
  FaStop,
  FaVolumeUp,
  FaVolumeDown,
  FaVolumeOff,
  FaVolumeMute,
} from "react-icons/fa";

export function Player() {
  const [radioRunning, setRadioRunning] = useState(false);

  const playRadio = () => {
    const radio = document.getElementById("player") as HTMLAudioElement;
    radio.scrollTo()
    radioRunning ? radio.pause() : radio.play();
    setRadioRunning(!radioRunning);
  };
  return (
    <>
      <audio loop={false} id="player">
        <source
          src="<my-radio-stream-link>"
          type='audio/mp4; codecs="mp4a.40.5"'
        />
        <source
          src="<my-radio-stream-link>"
          type="audio/aacp"
        />
        <span>Your browser dont support that element.</span>
      </audio>
      <div className="w-full flex justify-center gap-8 fixed bottom-0 py-2 bg-zinc-800">
        <button className="p-2">
          <FaVolumeUp className="w-5 h-5 mx-auto" />
        </button>
        <button className="p-4 -translate-y-11 rounded-full" onClick={playRadio}>
          {radioRunning ? (
            <FaStop className="w-10 h-10" />
          ) : (
            <FaPlay className="w-10 h-10" />
          )}
        </button>
        <button className="p-2">
          <FaVolumeUp className="w-5 h-5 mx-auto" />
        </button>
      </div>
    </>
  );
}

【问题讨论】：

也许只是将音量设置为 0 而不是停止音频？
感谢提示，但我的想法是让音量保持不变，只是暂停音频，然后能够以相同的音量返回，.muted 和 .play() 解决了我的问题。 const radio = document.getElementById("player") 作为 HTMLAudioElement； if(!radioRunning) { radio.volume = volume / 100;收音机播放（）； } radio.muted = radioRunning; setRadioRunning(!radioRunning);

标签： html reactjs audio live-streaming internet-radio

【解决方案1】：

使用你的 playRadio 函数是静音而不是停止的方法：

 const playRadio = () => {
    const radio = document.getElementById("player");
    radio.scrollTo()

    if(!radioRunning) radio.play()
    radio.muted = radioRunning;

    setRadioRunning(!radioRunning);
  };

【讨论】：