如何在这个使用 HTML5 网络音频 API 的音频可视化工具上实现音频控件？

Question

我知道当您像这样导入音频源时如何放置音频控件：

  <audio src="audio.mp3" id="audio" controls="true"></audio>

我尝试 fiddle 的音频可视化工具的不同之处在于它使用用户必须上传的音频（测试下面的演示）。我想知道的是 - 如何放置音频控件以便我可以播放、暂停、next/previous 歌曲、音量（带静音和取消静音）和循环按钮（如果选择，它循环当前 played/uploaded音频文件)音频文件?

当然，如果音频停止，我假设可视化工具也会停止？我不知道，因为我不知道如何放置音频控件。

Index.php代码：

<!DOCTYPE html>
<html>
 <head>
    <meta name="description" content="HTML5 Audio Spectrum Visualizer">
    <title>HTML5 Audio API showcase | Audio visualizer</title>
    <link type="text/css" rel="stylesheet" href="style/style.css">
 </head>
 <body>
    <div id="wrapper">
        <div id="fileWrapper" class="file_wrapper">
            <div id="info">
                HTML5 Audio API showcase | An Audio Viusalizer
            </div>
            <label for="uploadedFile">Drag&drop or select a file to play:  
</label>
            <input type="file" id="uploadedFile"></input>
        </div>
        <div id="visualizer_wrapper">
            <canvas id='canvas' width="800" height="350"></canvas>
        </div>
    </div>
    <footer>
        <small></small>
    </footer>
    <script type="text/javascript" src="js/html5_audio_visualizer.js">    
</script>
</body>
</html>

完整 javascript 文件（长）：

https://github.com/wayou/HTML5_Audio_Visualizer/blob/master/js/html5_audio_visualizer.js

这就是我想知道的。

谢谢。

原作者和代码（包括css）： https://github.com/wayou/HTML5_Audio_Visualizer 演示：http://wayou.github.io/HTML5_Audio_Visualizer/

Answer 1

查看源代码第 125 行的 _visualize 方法。在方法中，audioBufferSourceNode 保存已加载的文件。

在第 136 行，start() 和 stop() 方法正在音频节点上使用。如果您从库中获得对 audioBufferSourceNode 的引用，您可以调用这些方法来播放和暂停声音。

如何在这个使用 HTML5 网络音频 API 的音频可视化工具上实现音频控件？

How do I implement audio controls on this audio visualizer that uses HTML5 Web Audio API?

javascript

php

html

audio

web-audio-api