我知道当您导入音频源时如何放置音频控件，如下所示:
<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 - 如何在使用 HTML5 Web Audio API 的音频可视化工具上实现音频控件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30561569/