Ste*_*hen 4 javascript progress html5-audio
这是一个非常令人费解的问题，我在这里绕了好几次都没有找到解决方案。 这个问题变得太复杂了，无法正确接受我的所有更新和格式，所以让我们从这里开始。
基本问题是音频剪辑是从带有某种音频播放器的网页启动的。当页面出现时，浏览器不知道剪辑的持续时间，并且在第一次播放时，无论播放器具有什么 UI，都无法显示播放器在文件中的进度，即使它可以听得见地播放剪辑。一旦播放器完成剪辑，它也会了解持续时间，并且在随后的重播中，UI 会显示进度。
这是当前的状态：
1）最初的问题假设jQuery jPlayer与该问题有关，但随后的测试表明事实并非如此。 删除 jPlayer 并使用 HTML5 音频标签显示了完全相同的问题。
2) 最初我认为问题可能出在 SoX 将 .vox 文件转换为 .wav 时，但在 SoX 邮件列表上查看后，我确信情况并非如此。
3）有人建议（主要由 Gyrocode.com）问题可能在于使用 .wav 文件，但我可以使用 .ogg 和其他格式重现完全相同的问题。
我可以看到Gyrocode 显示的一些示例与我正在做的示例之间的唯一区别是，我的代码最初放入一个虚拟源，然后在向用户显示音频播放器之前动态更改它（在模式内）对话）。
下面是代码的骨架形式。
HTML：
<div class="form-group">
<label class="col-sm-4 control-label">Play Audio</label>
<div class="col-sm-8">
<div style="box-sizing:content-box;" class="container" id="player-container">
<audio controls src="NONE" id="audio-player" preload="metadata"></audio>
</div>
</div>
</div>
JS：
/**
* JavaScript functions for populating data on the transcripts page.
*/
var oParams = new Object();
// temporarily hardcoded
oParams.userId="sc1478";
oParams.audioId="";
var oAudioList;
// loads the data table
function showModalTranscribeDialog(id) {
console.log( 'You clicked on the row for audio id '+id );
oParams.audioId=id;
$('#playTranscribeModal').modal('show');
}
function fnLoadAudio() {
console.log('in fnLoadAudio');
var url="x/audio/" + oParams.userId + "/";
console.log("searching " + url);
oAudioList = $('#audiolist').DataTable({
"pageLength" : 10,
"processing" : true,
"serverSide" : false,
"cache" : false,
"ajax" : {
"url" : url,
"dataSrc" : "payload.listOfAudio"
},
"columns" : [{
"data" : "audioId",
"title" : "Audio ID",
"width" : "6%"
}, ...
],
"columnDefs" : [
...
],
});
// clicking on row of table brings up modal dialog for playing and
// transcribing
$('#audiolist tbody').on('click', 'tr', function () {
var id = $('td', this).eq(0).text();
showModalTranscribeDialog(id);
} );
console.log('done with fnLoadAudio');
}
...
// load clip into audio player
function fnLoadPlayer() {
var alerted = false;
var media_url_wav='audio/clip/wav/'+oParams.audioId+'/';
console.log("player will play " + media_url_wav);
$("#audio-player").attr("src", media_url_wav);
}
$(document).ready(function() {
console.log('in document ready !!');
$('#dynamic').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="audiolist"></table>' );
fnLoadAudio();
// set the ID of the selected audio in the dialog when the playTranscribe
//modal dialog is shown
$('#playTranscribeModal').on('show.bs.modal', function (e) {
...
fnLoadPlayer();
});
...
});
代码显示如下：
页面上有一个 JQuery 数据表，它还包含一个模式对话框，当单击表中的一行时会弹出该对话框，以便从用户进一步收集数据。该对话框包含音频播放器。当显示对话框并且用户单击播放按钮时播放音频。
文档准备好后将加载数据表。就绪事件处理程序调用 fnLoadAudio() 填充数据表并设置单击表行时的单击处理程序。在这种情况下，将调用函数 showModalTranscribeDialog()。首先使用行数据来获取要播放的音频的 id，并显示对话框。显示对话框后，另一个事件处理程序使用 id 来获取音频的正确 URL，然后将其设置到对话框上元素的 src 属性中。
这里说明的一点是，音频元素的 src 属性直到对话框出现才被填充，尽管音频元素一直在对话框中（但隐藏），并具有其他一些 src 值。
我的理论是，正是这种设置 src 的方式导致了问题，当音频的 src 以传统方式硬编码在页面上时，不会发生这种情况。
我的问题是，考虑到所描述的页面结构，是否有更好的方法来动态设置音频播放器的源。
答案很简单，持续时间（通常）不是元数据的一部分！当播放前已知持续时间时，这是因为源是作为文件而不是流传递的。我的应用程序使用提供流的 API 调用。
呃！
某些格式（例如 .mp3）可能在元数据中包含持续时间标签，但这不是强制性的，甚至可能不是一件好事。
我在我的网络应用程序中制作了一个带有两个标签的测试页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Audio Test Page</title>
</head>
<body>
<h1>Audio Test Page</h1>
<br/>
<audio controls src="audio/clip/wav/103659/" id="audio-test-player" preload="auto"></audio>
<br/>
<audio controls src="audiotest/test.wav" id="audio-test-player2" preload="auto"></audio>
<br/>
</body>
</html>
第一个执行常规应用程序执行的操作。它进行 API 调用，将文件作为流返回。事实上这是同一个 API。它将文件作为输入流读取，然后将其复制到响应的输出流中。
第二个加载与我临时放置在 web 应用程序中的静态资源相同的文件。
第一个也无法加载持续时间（即使使用 preload="auto"）。
第二个加载持续时间（即使使用 preload="metadata"）。
似乎当源作为文件传递时，浏览器有机会查看文件的大小并应用一些逻辑来预先确定持续时间。这与 soxi 实用程序用来猜测持续时间的逻辑相同，如此处详述
$ soxi /var/tmp/test.wav
Input File : '/var/tmp/test.wav'
Channels : 1
Sample Rate : 8000
Precision : 16-bit
Duration : 00:00:10.48 = 83840 samples ~ 786 CDDA sectors
Sample Encoding: 16-bit Signed Integer PCM
但是，当源作为流传递时，文件大小未知，并且无法进行此计算。
一种可能的解决方案可能是将计算出的持续时间包含在标准或自定义元数据标签中的元数据中，并为某些播放器设置皮肤以使用它，但基本问题是期望之一。
持续时间通常不是元数据的一部分，并且浏览器无法在源的流式传输中计算持续时间。
因此，我们对这个令人烦恼的问题给出了不完全令人满意但最终理解的答案，这个问题已经跨越了
我的用例有点不标准，可能不是大多数声音 API 用户想要实现的目标。
| 归档时间： |
|
| 查看次数： |
5383 次 |
| 最近记录： |