Как я могу реализовать элементы управления звуком на этом аудио-визуализаторе, который использует 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/
Решение
Посмотрите на _visualize метод в строке 125 источника. В способе audioBufferSourceNode содержит файл, который был загружен.
по линии 136 start() а также stop() методы используются на аудио узле. Если вы получите ссылку на audioBufferSourceNode вне библиотеки вы можете вызывать эти методы для воспроизведения и приостановки звука.
Другие решения
Других решений пока нет …