播放 s3 音频并在 React 组件中下载文件

Question

我正在尝试构建一个组件，该组件可以播放我的 s3 存储桶中的音频文件，并且有一个按钮可以在需要时将文件下载到本地。

根据我的研究，这是我现在拥有的，但它不起作用。我想我可能需要下载一个库？

代码：

import React from 'react';

<script src="https://unpkg.com/boxicons@latest/dist/boxicons.js"></script>

function AudioFilePlayer(props) {
  var name = props.name;
  var id = props.id;
  var s3_url = props.s3_url;

  const handleAudioPlay = (s3_url_link, state) => {
    
    var audio = new Audio(s3_url_link)

    if (state) {
      audio.play() 
    }
    else {
      audio.pause() 
    }

  }

 //no clue how to download
  return (
    <div className="AudioFileListItem">
      <div className="AudioFileListElements">
        <a href="javascript:void(0);" onClick={handleAudioPlay(s3_url, true)}>
          <span className="AudioFilePlayButton">
            <box-icon name='play-circle' color='#ffffff' size="sm"></box-icon>
          </span>
          <span className="AudioFilePlayButtonTitle">
            Play
          </span>
        </a>
       <a ref="javascript:void(0);" onClick={handleDownloadPlay(s3_url, true)}> 
        <span className="AudioFileDownloadButton">
          <box-icon name='download' type='solid' color='#ffffff' size="sm"></box-icon>
        </span>
        <span className="AudioFileDownloadButtonTitle">
          Download
        </span>
       </a> 
      </div>
    </div>
  );
}

export default AudioFileListItem;

我测试了 aws s3_url，效果很好。当 link 打开时，它会在我的浏览器中下载正确的 wav 文件。

示例 link 为：

https://bobmarley.s3.amazonaws.com/music/34/reggae.wav

我想要的结果是能够单击播放 html（用户按钮），将其更改为暂停外观（我可以轻松做到），然后实际播放音频。当我想停止音频时，我可以按下它，它应该会暂停并再次显示播放按钮。

对于下载按钮，我只想下载文件。我知道我可以通过在选项卡中打开 url 来做到这一点，但我不想透露 URL。我想知道是否有另一种方法可以不向用户显示 url.

我已经在这几个星期了，所以真的任何帮助对我来说都意味着世界。

非常感谢您和这个社区！

Answer 1

我改变了 2 个东西，在我这边效果很好

代替使用 onClick={handleAudioPlay(s3_url, true) 使用 onClick={()=>handleAudioPlay(s3_url, true)}
因为我无法从我这边访问 https://bobmarley.s3.amazonaws.com/music/34/reggae.wav 我用这个 url https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3 来测试。

ReactDOM.render(<AudioFilePlayer />, document.getElementById("root"));

function AudioFilePlayer(props) {
    let name = props.name;
    let id = props.id;
    let s3_url = "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3";

    const handleAudioPlay = (s3_url_link, state) => {
        var audio = new Audio(s3_url_link);
        if (state) {
            audio.play();
        } else {
            audio.pause();
        }
    };

    //no clue how to download
    return (
        <div className="AudioFileListItem">
            <div className="AudioFileListElements">
                <a
                    href="javascript:void(0);"
                    onClick={()=>handleAudioPlay(s3_url, true)}
                >
                    <span className="AudioFilePlayButton">
                        <box-icon
                            name="play-circle"
                            color="#ffffff"
                            size="sm"
                        ></box-icon>
                    </span>
                    <span className="AudioFilePlayButtonTitle">Play</span>
                </a>
                <a
                    href="javascript:void(0);"
                    // onClick={handleDownloadPlay(s3_url, true)}
                >
                    <span className="AudioFileDownloadButton">
                        <box-icon
                            name="download"
                            type="solid"
                            color="#ffffff"
                            size="sm"
                        ></box-icon>
                    </span>
                    <span className="AudioFileDownloadButtonTitle">
                        Download
                    </span>
                </a>
            </div>
        </div>
    );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  <div id="root"></div>

播放 s3 音频并在 React 组件中下载文件

playing s3 audio and downloading the file in react component

javascript

audio

amazon-s3

audio-streaming

reactjs