如何在使用HTML5 Web Audio API的音頻可視化程序上實現音頻控件？

Question

我知道在導入音頻源時如何放置音頻控件，如下所示：

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

我試圖擺弄的音頻可視化器的不同之處在於，它使用了音頻，用戶必須上載（測試下面的演示）。 我想知道的是-如何放置音頻控件，以便可以播放，暫停，下一首/上一首歌曲，音量（帶有靜音和取消靜音）和一個循環按鈕（如果選擇，它將循環播放當前播放/上載的音頻音頻文件）的音頻文件？

當然，如果音頻停止，我假設可視化器也將停止？ 我不知道，因為我不知道如何放置音頻控件。

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 Web Audio API的音頻可視化程序上實現音頻控件？

問題描述

1 個解決方案

解決方案1
1 已采納 2015-05-31 21:56:31

如何在使用HTML5 Web Audio API的音頻可視化程序上實現音頻控件？

問題描述

1 個解決方案

解決方案1 1 已采納 2015-05-31 21:56:31

解決方案1
1 已采納 2015-05-31 21:56:31