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

我知道如何把音響控制鍵，當你導入音頻，像這樣的源：如何在使用HTML5 Web Audio API的音頻可視化工具上實現音頻控件？

<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/

來源

2015-05-31 Hedi

只看源125行_visualize方法。在該方法中，audioBufferSourceNode保存已加載的文件。

on line 136 start() and stop()方法正在音頻節點上使用。如果您從庫中獲得audioBufferSourceNode的引用，則可以調用這些方法來播放和暫停聲音。

來源

2015-05-31 21:56:31

那麼我需要做些什麼來啓動（）和停止（）方法？ – Hedi

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

回答

相關問題