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

Posted 2023-02-25

【中文标题】在反应组件中播放 s3 音频并下载文件

【英文标题】：playing s3 audio and downloading the file in react component

【发布时间】：2021-07-17 22:07:54

【问题描述】：

我正在尝试构建一个组件，该组件可以播放我的 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 的情况下做到这一点。

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

非常感谢您和这个社区！

【参考方案1】：

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

建议使用onClick=handleAudioPlay(s3_url, true) 使用onClick=()=>handleAudioPlay(s3_url, true) 由于我无法从我身边访问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>

【讨论】：

那么这里没有下载音频的解决方案吗？