Javascript从音轨中选择片段

时间:2010-12-08 12:07:47

标签: javascript jquery html5 audio jplayer

我正在开发一个PHP项目,从一个轨道库中,用户可以选择一个轨道,从该轨道中选择几秒钟的片段,并使用该片段作为搜索参数。下一页。

客户端希望显示轨道的波形(这些已经生成为PNG文件),其中“播放头”显示当前播放位置(应该很容易)。用户应该能够通过拖动垂直条,试听所选片段(通过按空格键或类似方式)来选择开始和端点以进行选择,然后单击“搜索”以提交HTML表单。我从表单中实际需要的唯一参数是所选音频片段的开始和结束位置。

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

您是否对我应该考虑帮助实现的JavaScript库或解决方案有任何建议:嵌入音频文件,播放控制界面和片段选择界面。尽管可能为所有mp3生成相应的OGG文件(以帮助HTML5实现),但我不希望尽可能,因为它使事情变得复杂。理想情况下,我想要一个只提供跨浏览器支持的mp3解决方案。或许像jPlayer这样的可能性? 我当然熟悉jQuery,所以使用它将是一个奖励。

我可以使用哪些现有的库可以帮助我使用“代码段选择”界面?在一个完全理想的世界中,它将是一个带有“擦洗条”的解决方案 - 即当你拖动开始和终点手柄时,“播放头”的声音会立即被预览。

非常感谢任何想法和建议!

编辑(更多信息):

我希望能够创建类似于此演示的内容: http://www.happyworm.com/jquery/jplayer/latest/demo-07.htm除了 用户可以从曲目中选择“片段”的附加功能, 使用起点和终点擦洗条,并可以通过试听片段 按戏剧。 所以,我想要的界面是这样的:

  • 在页面加载时,轨道将开始缓冲,并且播放按钮 如果按
  • ,将从正常开始播放
  • 如果用户从轨道的最左边缘拖动一个擦洗条, 将播放播放头处的声音(与演示I一样) 链接到),并在释放擦洗栏时,播放将继续 从那里到赛道的尽头
  • 如果用户从轨道的最右侧拖动另一个擦洗条, 再次预览播放头的声音。但是,作为 栏被释放后,播放应该跳回LEFT擦洗栏, 并从那里继续。 (如果这太难实现,我会 很高兴右侧的擦洗条不能预览声音 拖动,但只是作为选择结束的“标记”。
  • 两个擦洗条不能相互通过,所以左边的擦洗条始终是 '开始'和右边是选择的'结束'。
  • 一旦移动了条形并进行了选择,即可 播放应无限循环选定的片段,直到“停止” 被压了。
  • 在一个理想的世界里,我希望擦洗条能够“捕捉”到一个网格 整秒,以便片段的开始,结束和长度值 总是一整秒钟。如果做不到这一点,我就会绕过去 在JavaScript之后的数字到最接近的整数。

1 个答案:

答案 0 :(得分:0)

选择:

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

对于做回放清理的JavaScript,祝你好运...听起来更像是flash或html5的东西