Javascript 从音轨中选择片段

Posted 2023-02-25

【中文标题】Javascript 从音轨中选择片段

【英文标题】：Javascript to select snippet from audio track

【发布时间】：2010-12-08 12:07:47

【问题描述】：

我正在用 php 开发一个项目，用户可以从曲目库中选择一个曲目，从该曲目中选择一个几秒钟长的 sn-p，并将该 sn-p 用作下一页的搜索参数。

客户端希望显示轨道的波形（这些已生成为 PNG 文件），并带有显示当前播放位置的“播放头”（应该很容易做到）。用户应该能够通过拖动竖线来选择起点和终点，试听选定的 sn-p（按空格键或类似方法），然后单击“搜索”以提交 html 表单。表单中我真正需要的唯一参数是所选音频 sn-p 的开始和结束位置。

所以，这就是客户想要的，而我正处于头脑风暴阶段。到目前为止，我有一堆mp3文件和相应的波形图。在浏览器支持方面，可以指定浏览器必须是“...的最新版本”，但我想为所有大牌提供支持：Safari、Firefox、Opera、IE、Chrome .

您对 javascript 库或解决方案有什么建议我应该考虑帮助实现：嵌入音频文件、播放控制界面和 sn-p 选择界面。尽管可以为所有 mp3 生成相应的 OGG 文件（以帮助实现 HTML5），但如果可能的话，我不希望这样做，因为它会使事情复杂化。所以理想情况下，我想要一个提供跨浏览器支持的仅限 mp3 的解决方案。也许像 jPlayer 这样的东西是可能的？ 我当然对 jQuery 很熟悉，所以使用它会是一个好处。

是否有任何我可以使用的现有库可以帮助我使用“sn-p 选择”界面？在一个完全理想的世界中，这将是一个带有“scrub bar”的解决方案 - 即当您拖动开始和结束句柄时，“播放头”处的声音会立即预览。

非常感谢您的任何想法和建议！

编辑（更多信息）：

我希望能够创建类似于此演示的内容： http://www.happyworm.com/jquery/jplayer/latest/demo-07.htm 除外 用户可以从轨道中选择“sn-p”的附加功能， 使用起点和终点磨砂条，并且可以通过以下方式试听 sn-p 按下播放。 所以，我想要的界面是这样的：

在页面加载时，曲目将开始缓冲，并且播放按钮 如果按下，将正常从头开始播放 如果用户从轨道的最左边缘拖动一个滑动条， 播放头处的声音将被预览（与我的演示一样 链接到），并且在释放擦洗条时，播放将继续 从那里到赛道的尽头 如果用户从轨道的最右侧拖动另一个滑动条， 播放头处的声音将再次被预览。然而，作为 bar 被释放，播放应该跳回到 LEFT 擦洗栏， 并从那里继续。 （如果这太难实现，我会 对右侧的擦洗栏感到满意，因为它不会预览声音 拖动，但只是作为选择结束的“标记”）。 两个磨砂条不能互相通过，所以左边的总是 “开始”，右边是选择的“结束”。 移动条形并进行选择后， 播放应无限期循环选定的 sn-p，直到“停止” 被按下。 在理想的世界中，我希望磨砂条“卡入”到 整秒，因此 sn-p 开始、结束和长度值是 总是整数秒。做不到这一点，我就绕道而行 稍后在 JavaScript 中将数字转换为最接近的整数。

【参考方案1】：

对于选择：

http://docs.jquery.com/UI/Slider

至于 JavaScript 进行播放擦洗，祝你好运……听起来更像是 flash 或 html5 的东西

【讨论】：

自发布以来，我发现这个 jPlayer 演示 - happyworm.com/jquery/jplayer/latest/demo-07.htm - 允许使用他们的 HTML5/Flash 支持进行清理。这看起来很棒，所以我现在的问题是关于扩展示例以添加第二个擦洗栏，并预览选择。我会更新我原来的问题！