个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
这是一个非常令人费解的问题，我在这里纠缠了好几次都没有找到解决方案。 That question was getting too complicated正确获取我的所有更新和格式，所以让我们从这里重新开始。
基本问题是音频剪辑是从网页上启动的，网页上有某种音频播放器。当页面出现时，浏览器不知道剪辑的持续时间，并且第一次播放时，无论播放器的 UI 是什么，都无法显示播放器播放文件的进度，即使播放剪辑时可以听到。播放器完成剪辑后，它还会了解持续时间，并且在随后的重播中，UI 会显示进度。
这是当前的游戏状态:
1) 最初的问题假定 jQuery jPlayer 与问题有关，但随后的测试表明它没有。 删除 jPlayer 并改为使用 HTML5 音频标签会显示完全相同的问题。
2) 最初我认为问题可能出在 .vox 文件到 .wav 的 SoX 转换上，但是 a go-round on the SoX mailing list说服我事实并非如此。
3) 有人建议(主要是 Gyrocode.com)问题可能在于使用 .wav 文件，但我可以用 .ogg 和其他格式重现完全相同的问题。
我能看到的一些 the samples that have been shown by 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)可能会在元数据中包含持续时间标签，但这不是强制性的并且 perhaps not even a good thing.
我在我的网络应用程序中制作了一个带有两个标签的测试页。
<!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。它将文件作为 InputStream 读取，然后将其复制到响应的 OutputStream 中。
第二个加载与我临时放置在 webapp 中的静态资源相同的文件。
第一个也无法加载持续时间(即使使用 preload="auto")。
第二个加载持续时间(即使使用 preload="metadata")。
似乎当源作为文件交付时，浏览器有机会查看文件的大小并应用一些逻辑来预先确定持续时间。这与 soxi 实用程序用来猜测持续时间的逻辑相同 as detailed here
$ 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 用户想要实现的目标。
关于javascript - 第一次使用 HTML5 <audio> 标签播放时音频剪辑没有获得持续时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31818821/
29
4
0
我做了一个项目，使用两个不同的textview进行触摸来播放两个音频。 这是一个文本 View 的简单代码 tv.setOnTouchListener(new OnTouchListener() {
我正在使用 pygame 模块在 python 中操作声音文件。它在交互式 python session 中工作正常，但相同的代码在 bash 中不会产生任何结果: 交互式Python $ sudo
请注意它只能是 JavaScript。请参阅下面我当前的 HTML。我需要像当前代码一样在页面之间旋转。但是，我需要能够在页面之间暂停/播放。
我有一个带有一堆音频链接的html。我正在尝试使所有音频链接都在单击时播放/暂停，并且尝试了here解决方案。这正是我所追求的，只是我现在不得不修改此功能以应用于代码中的所有音频链接(因为我不能为每个
在尝试进入我的代码中的下一个文件之前，我尝试随机播放.wav文件数毫秒。最好的方法是什么？ 我目前有以下代码: #!/usr/bin/env python from random import ran
我有2个回调函数，一个播放音频，另一个停止音频。 function Play_Callback(hObject, eventdata, handles) global path; global pla
我有一个电台应用程序，并与carplay集成。在Carplay仪表板中，我仅看到专辑封面图像和停止按钮。我想在仪表板上显示播放/暂停和跳过按钮。如果您对该站有任何了解，可以帮我吗？ 最佳答案 您需要使
我正在使用 ffmpeg 创建一个非常基本的视频播放器。库，我有所有的解码和重新编码，但我坚持音频视频同步。 我的问题是，电影有音频和视频流混合(交织)，音频和视频以“突发”(多个音频包，然后是并列的
我不知道我在做什么错 $(document).ready(function() { var playing = false; var audioElement = document.
我正在尝试通过(input:file)Elem加载本地音频文件，当我将其作为对象传递给音频构造函数Audio()时，它不会加载/播放。 文件对象参数和方法: lastModified: 1586969
在 Qt 中创建播放/暂停按钮的最佳方法是什么？我应该创建一个操作并在单击时更改其图标，还是应该创建两个操作然后以某种方式在单击时隐藏一个操作？如何使用一个快捷键来激活这两个操作？ (播放时暂停，暂停
我正在用 Python 和 SQLite 构建一个预订系统。 我有一个 Staff.db 和 Play.db (一对多关系)。这个想法是这样的:剧院的唯一工作人员可以通过指定开始日期和时间来选择何时添
我有一个服务于 AAC+ (HE v2) 的 Icecast 服务器。我在我的网页中使用 JPlayer 来播放内容。在没有 Flash Player 的 Chromium 中，它工作得很好。 对于支
当我运行我的方法时，我收到一个MediaException。我使用 playSound("src/assets/timeup.mp3"); 调用该方法。 private void playSound(
我有一项正在播放播客的服务。我希望该服务检测用户何时按下暂停或从他们的 BT radio 播放，以便我可以停止和启动它。对于我的生活，我无法弄清楚要向我的监听器添加什么过滤器(当我按下 BT 按钮时，
我对 Java 不是很在行，在研究网站上的音乐循环的简单播放/暂停按钮后，我得到了这段代码。它可以很好地离线测试，但在上传到 FTP 服务器后，它不会在任何浏览器中播放音频，我得到 SyntaxErr
我有一个使用 flickity carousel library 创建的视频轮播, 见过 here on codepen .我想要发生的是，当用户滑动轮播时，所选幻灯片停止播放，然后占据所选中间位置的
这是一个 JSFiddle: http://jsfiddle.net/8LczkwLz/19/ HTML: JS: var flashcardAudio = documen
我的问题是我无法将歌曲标题文本保持在 line-height: 800px;当用户播放或暂停播放器时。我设法在 :hover 上做到了。这似乎是一件非常棘手的事情，这真的是我第一次遇到 CSS 如此困
我还没有找到与我的完全一样的帖子，所以这就是问题所在。我正在制作一个 mp3 播放器，播放/暂停是两个单独的按钮。这是我的代码。 prevButton = document.getElementByI
我是一名优秀的程序员,十分优秀！