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

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 并且效果很好。当链接打开时，它会在我的浏览器中下载正确的 wav 文件。

示例链接是：

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

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

对于下载按钮，我只想下载文件。我知道我只需在选项卡中打开 URL 即可做到这一点，但我不想透露 URL。我想知道是否有另一种方法可以在不向用户显示网址的情况下完成此操作。

我已经这样做了好几个星期了，所以任何帮助对我来说都意味着一切。

非常感谢您和这个社区！

Answer 1

我改变了两件事，从我这边来说效果很好

1. 代替使用onClick={handleAudioPlay(s3_url, true)使用onClick={()=>handleAudioPlay(s3_url, true)}
2. 由于我无法https://bobmarley.s3.amazonaws.com/music/34/reggae.wav从我这边访问，因此我使用此网址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>