如何在使用HTML5 Web Audio API的音频可视化程序上实现音频控件? - javascript

我知道在导入音频源时如何放置音频控件,如下所示:

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

参考方案

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

在第136行上,在音频节点上使用了start()stop()方法。如果从库中引用了audioBufferSourceNode,则可以调用这些方法来播放和暂停声音。

如何从javascript提交带有本地列表的表单 - javascript

我有一个列表,我用javascript创建了它,我想将其发送到controller:function submit1() { var list_id = []; var i; for(i = 0; i < @Model.Count(); i++){ var x =docuzment.getElementsByClassName("bt1�…

Mongo汇总 - javascript

我的收藏中有以下文件{ "_id": ObjectId("54490b8104f7142f22ecc97f"), "title": "Sample1", "slug": "samplenews", "cat": …

如何在JQuery中操作JSONArray - javascript

我有一个php函数,它以JSON返回此代码{"0":{"title":"Dans l\u2019appartement"},"1":{"title":"A l\u2019a\u00e9roport - D\u00e9part de B\u00e9at…

和字符中断通过PHP接收JSON - javascript

我有一个包含更多对象的数组。如果一个对象包含&字符,则php不会接收&之后的每个对象。可能是什么问题?这就是阿贾克斯xmlhttp.open("POST", "get.php"); xmlhttp.setRequestHeader("Content-Type", "application/…

编码JSON数据以保留json格式 - javascript

由于JSON值是动态生成的,并且其中的值是基于用户输入的,因此,如果用户在字符串中输入了不可接受的字符(如"),则会使json无效。就像是:{ "tag" : "demo", "value": "user " input" } 有没有一种方法可以编码或转义JS…