audio 相关问题

实现wavesurfer光标插件波形播放器

我目前正在为我的网站开发一个wavesurfer播放器，这就是我到目前为止所得到的 波形播放器 <p>我目前正在为我的网站开发一个 Wavesurfer 播放器，这就是我到目前为止所得到的</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Waveform Player&lt;/title&gt; &lt;script src=&#34;wavesurfer.js&#34;&gt;&lt;/script&gt; &lt;script&gt; function hide_player() { var x = document.getElementById(&#34;player&#34;); if (x.style.display === &#34;none&#34;) { x.style.display = &#34;block&#34;; } else { x.style.display = &#34;none&#34;; } } &lt;/script&gt; &lt;style&gt; html { height: 1500px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;iframe src=&#34;http://example.org&#34; height=&#34;100%&#34; width=&#34;100%&#34;&gt;&lt;/iframe&gt; &lt;div style=&#34;position: fixed; bottom: 0; right: 0; z-index: 999; display: block; width: 123px; float: right;&#34;&gt; &lt;button onclick=&#34;hide_player()&#34;&gt;Hide/Show Player&lt;/button&gt; &lt;/div&gt; &lt;div style=&#34;position: fixed; z-index: 100; bottom: 0; left: 0; width: 100%; background-color: grey;&#34; id=&#34;player&#34;&gt; &lt;div id=&#34;waveform&#34;&gt;&lt;/div&gt; &lt;table border=&#34;0&#34; align=&#34;center&#34;&gt; &lt;tr&gt; &lt;td&gt;&lt;button onclick=&#34;wavesurfer.skipBackward()&#34;&gt;&lt;&lt;&lt;/button&gt;&lt;/td&gt; &lt;td&gt;&lt;button onclick=&#34;wavesurfer.playPause()&#34;&gt;Play / Pause&lt;/button&gt;&lt;/td&gt; &lt;td&gt;&lt;button onclick=&#34;wavesurfer.skipForward()&#34;&gt;&gt;&gt;&lt;/button&gt;&lt;/td&gt; &lt;td&gt;Volume:&lt;/td&gt; &lt;td&gt; &lt;input id=&#34;volumeSlider&#34; type=&#34;range&#34; name=&#34;volume-slider&#34; min=&#34;0&#34; max=&#34;100&#34; value=&#34;50&#34;/&gt; &lt;/td&gt; &lt;td&gt; Time: &lt;span id=&#34;currentTime&#34;&gt;00:00:00&lt;/span&gt; &lt;span&gt;/&lt;/span&gt; &lt;span id=&#34;totalDuration&#34;&gt;00:00:00&lt;/span&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;script&gt; //Timecode const currentTime = document.querySelector(&#34;#currentTime&#34;) const totalDuration = document.querySelector(&#34;#totalDuration&#34;) //Volume Control const volumeSlider = document.querySelector(&#34;#volumeSlider&#34;) //Load Wavesurfer and options var wavesurfer = WaveSurfer.create({ container: &#39;#waveform&#39;, waveColor: &#39;violet&#39;, progressColor: &#39;blue&#39;, backgroundColor: &#39;green&#39;, responsive: &#39;true&#39; }); //Volume Control const handleVolumeChange = e =&gt; { // Set volume as input value divided by 100 // NB: Wavesurfer only excepts volume value between 0 - 1 const volume = e.target.value / 100 wavesurfer.setVolume(volume) // Save the value to local storage so it persists between page reloads localStorage.setItem(&#34;audio-player-volume&#34;, volume) } const setVolumeFromLocalStorage = () =&gt; { // Retrieves the volume from local storage, or falls back to default value of 50 const volume = localStorage.getItem(&#34;audio-player-volume&#34;) * 100 || 50 volumeSlider.value = volume } //Load Track wavesurfer.load(&#39;http://ia902606.us.archive.org/35/items/shortpoetry_047_librivox/song_cjrg_teasdale_64kb.mp3&#39;); //Volume Control window.addEventListener(&#34;load&#34;, setVolumeFromLocalStorage) volumeSlider.addEventListener(&#34;input&#34;, handleVolumeChange) //Timecode const formatTimecode = seconds =&gt; { return new Date(seconds * 1000).toISOString().substr(11, 8) } wavesurfer.on(&#34;ready&#34;, () =&gt; { // Set wavesurfer volume wavesurfer.setVolume(volumeSlider.value / 100) // Timecode const duration = wavesurfer.getDuration() totalDuration.innerHTML = formatTimecode(duration) }) wavesurfer.on(&#34;audioprocess&#34;, () =&gt; { const time = wavesurfer.getCurrentTime() currentTime.innerHTML = formatTimecode(time) }) //Spacebar starts player document.body.onkeyup = function(e){ if(e.keyCode == 32){ wavesurfer.playPause() } } window.addEventListener(&#39;keydown&#39;, function(e) { if(e.keyCode == 32 &amp;&amp; e.target == document.body) { e.preventDefault(); } }); &lt;/script&gt; &lt;/html&gt; </code></pre> <p>我尝试了几个小时来实现光标插件：</p> <pre><code>https://wavesurfer-js.org/example/cursor/index.html https://wavesurfer-js.org/api/class/src/plugin/cursor/index.js~CursorPlugin.html </code></pre> <p>但是我失败了，我现在不知道该怎么办了。 有人可以帮我编辑上面的代码吗？我真的很感激。</p> <p>我还希望有一个“活动”播放/暂停按钮，这样它会在音频播放时显示播放，如果不播放则暂停。 现在它是静态的，我不知道如何改变它。</p> </question> <answer tick="false" vote="0"> <p>实现这个插件并不难。您在文档中有<a href="https://wavesurfer-js.org/example/cursor/index.html" rel="nofollow noreferrer">一个示例</a>。</p> <p>首先加载<em>wavesurfer</em>光标插件：</p> <pre><code>&lt;script src=&#34;wavesurfer.cursor.js&#34;&gt;&lt;/script&gt; </code></pre> <p>然后需要在<em>wavesurfer</em>实例中添加插件：</p> <pre><code>//Load Wavesurfer and options var wavesurfer = WaveSurfer.create({ container: &#39;#waveform&#39;, waveColor: &#39;violet&#39;, progressColor: &#39;blue&#39;, backgroundColor: &#39;green&#39;, responsive: &#39;true&#39;, plugins: [ WaveSurfer.cursor.create({ // &lt;-- here showTime: true, opacity: 1, customShowTimeStyle: { &#39;background-color&#39;: &#39;#000&#39;, color: &#39;#fff&#39;, padding: &#39;2px&#39;, &#39;font-size&#39;: &#39;10px&#39; } }) ] }); </code></pre> <p>如果您想监听 <pre><code>play</code></pre> 和 <pre><code>pause</code></pre> 事件，您可以使用 <em>wavesurfer</em> 事件监听器，如<a href="https://wavesurfer-js.org/docs/events.html" rel="nofollow noreferrer">here</a>所述。</p> <pre><code>wavesurfer.on(&#39;pause&#39;, function () { /* do stuff when wavesurfer is paused */ }); </code></pre> <p>我让您根据需要更改按钮的外观。</p> </answer> <answer tick="false" vote="0"> <p>Cursor 插件现已被 Hover 插件取代 =)</p> <p><a href="https://wavesurfer.xyz/examples/?hover.js" rel="nofollow noreferrer">悬停插件</a></p> </answer> </body></html>

使用内容范围标头将音频流式传输到浏览器中的音频播放器无法按预期工作

我有一个应用程序，用户可以请求收听一些音频。其中一些音频可能会很长，例如有时 16 小时，所以我想将音频流式传输到 html5 播放器，否则...

Exoplayer 无法播放视频，音频接收器错误

Exoplayer 不播放视频，第二次只播放音频。 @可组合 fun VideoLayout(videoUrl: String?, muted: Boolean = false) { if (videoUrl == null) 返回 val 上下文 =

使用React中的Web Media Recorder API作为前端，使用Python作为后端来实现实时语音识别

我们要实现什么？ 我们部署了一个人工智能模型来传输麦克风中的音频并向用户显示语音文本。像这样的东西。 使用什么技术？ 蟒蛇...

当我将每个音频部分加入一个音频时，为什么在 FFmpeg 中每个音频部分的声音都更大？

我尝试为音频配音。我有原始音轨，我想将翻译后的音频部分放在原始音轨之上。 翻译后的音频 100% 音量：--p1--- ---p2-- -----p3--- --p4--

Android WebRTC 流始终将立体声音频缩混为单声道

当前，当我尝试播放具有立体声音频（两个音频通道）的 WebRTC 流时，我的 Android STB 设备遇到问题。主要问题是设备总是缩混...

React Audio Recorder 在 useState 挂钩中为录制的音频返回 null

我正在React中构建一个注册表单，用户可以在其中输入用户名并使用react-audio-voice-recorder库录制音频。我正在使用 useState 挂钩来管理

命令的python ffmpeg配置

我想将 mp3 文件转换为 mp3，但使用我的设置。有人可以帮助我创建 python 代码或 cmd 命令来使用 ffmpeg 执行此类操作吗？我有数百个 mp3 文件，所以我需要

自动检测任何歌曲的强拍/主拍？

如果我有一个包含名称和 ISRC 的歌曲列表，我怎样才能获得带有时间戳的主节拍？ 只是想想象歌曲播放时的主要节拍。我可以对其进行预处理，因此不需要实时......

在.net中处理pcm wav流

我需要处理未压缩的波形（wav）文件（pcm）。作为输入，我收到流（System.IO.Stream）中的 wav。我需要做几件事： 从其他声音 (wav) 的片段中获取新声音 (wav)（通过

可以合并两个音频“base64data”字符串来创建一个独特的音频文件吗？

是否可以合并两个音频“base64data”字符串来创建一个独特的音频文件？ 我在字符串中有两个循环音频 Base64 wav，如下所示： 数据：音频/x-wav;base64，UklGRuIfQVZFZm1R7SH$WP90AhICLw...

在Next.js中找不到音频文件

我目前在将音频文件导入 redux 切片时遇到问题。 目前我正在尝试从 应用程序>公共>音频目录。 我试图获取我的音频文件...

使用 NAudio 分割 Wav 文件会从每个部分中删除 1 秒

我正在使用 NAudio 将 Wav 文件分割成等间隔的多个部分。我正在使用 Mark Heath 的 Sound Code 上提供的代码版本： 公共静态无效 TrimWavFile(string inPath, s...

ASIO SDK 如何处理音频缓冲区

所以我正在开发一些音频处理软件，我对一些 ASIO 音频处理有点困惑。从我读到的内容来看，似乎当进行缓冲区切换回调时，我需要

PyAudio 商业用途

如果我要构建一个 Web 应用程序来接收音频输入以进行分类，那么使用 PyAudio 等第三方库是否会是一个大问题，不是吗？ 我猜大公司会建立自己的双...

2 个音频文件的相似性检查

我想问一个关于语音相似性检查的问题。假设我有 2 个包含相同单词的音频文件，由 2 个不同的扬声器录制，我想验证这 2 个音频是否...

访问 Android 媒体流以实现音频可视化

基本上，我想制作一个音频可视化工具。我知道这是可能的，因为我的手机附带了一些可以做到这一点的动态壁纸。问题是，我似乎不知道如何用

鼠标悬停/鼠标点击图像p5.js

我正在尝试创造演奏手鼓的体验。这个想法是，用户拿起鼓槌，将其悬停在鼓上方，如果用户再次单击，鼓就会播放音频。是...

使用 ffmpeg 在一个音频文件中实现多个淡入/淡出效果

我在向一个音频文件添加多个淡入淡出效果时遇到一些问题。当我尝试使用这样的命令时： ffmpeg -y -i /home/user/video/test/sound.mp3 -af "afade=t=in:ss=0:d=3,afade=t=out:st=7:d=3...

将音频 blob 上传到服务器并另存为文件

我有 3 个按钮来录制、停止和播放音频。 使用 MediaRecorder 可以轻松运行音频 blob。 当我尝试将 blob 作为文件上传到服务器时出现问题。 我有一个音频元素...