【发布时间】：2018-09-26 08:36:41
【问题描述】：
在以下网址：
https://www.tophtml.com/snl/15.mp3
我想在following range 上使用纯Web Audio API 播放一个音频：
range from: second: 306.6
range to: second: 311.8
total: 5.2 seconds
我将该文件下载到我的桌面（我正在使用Windows 10），然后使用VLC 打开它并获得以下文件信息：
number of channels: 2
sample rate: 44100 Hz
bits per sample: 32 (float32)
这里有关于这个概念的信息：
我从那里得到以下摘录：
我想玩上面评论的range（也贴在这里）：
range from: second: 306.6
range to: second: 311.8
total: 5.2 seconds
通过从支持请求标头的服务器下载该片段：Range。
然后我尝试了以下代码：
...
let num_channels = 2;
let sample_rate = 44100;
let range_from = 0; // Goal: 306.6 seconds
let range_length = (sample_rate / num_channels) * 5.2; // Goal: 5.2 seconds
let range_to = range_from + (range_length - 1); // "range_to" is inclusive (confirmed)
request.setRequestHeader("Range", "bytes=" + range_from + "-" + range_to);
...
我的问题是：
我需要为变量找到正确的值：
range_from，以便它从第二个开始播放：306.6。我想知道上面为
range_length指定的值是否正确，因为可能有用于标头的字节等，我的意思是：headers+data。
这里有我到目前为止的代码：
window.AudioContext = window.AudioContext || window.webkitAudioContext; // necessary for iPhone (maybe others). Could change a near future.
const URL = 'https://www.tophtml.com/snl/15.mp3';
const context = new AudioContext();
window.addEventListener('load', function() {
const button_option_1 = document.querySelector('.button_option_1');
const button_option_1_play = document.querySelector('.button_option_1_play');
button_option_1_play.disabled = true;
button_option_1.addEventListener('click', async function() {
let time_start, duration;
let buffer;
log('...', false);
button_option_1_play.disabled = true;
button_option_1_play.onclick = () => playBuffer(buffer);
//---
time_start = new Date().getTime();
let arrayBuffer = await fetch(URL);
// download complete
duration = sprintf('%.2fs', (new Date().getTime()-time_start)/1000);
log(sprintf('P2. Delay: +%s for download. Wait...', duration));
//---
time_start = new Date().getTime();
let audioBuffer = await decodeAudioData(context, arrayBuffer);
// decoding complete
duration = sprintf('%.2fs', (new Date().getTime()-time_start)/1000);
log(sprintf('P3. Delay: +%s for decoding.', duration));
//---
button_option_1_play.disabled = false;
buffer = audioBuffer;
button_option_1_play.click();
});
});
function playBuffer(buffer, from, duration) {
const source = context.createBufferSource(); // type of "source": "AudioBufferSourceNode"
source.buffer = buffer;
source.connect(context.destination);
source.start(context.currentTime, from, duration);
}
function log(text, append = true) {
let log = document.querySelector('.log');
if (!append)
log.innerHTML = '';
let entry = document.createElement('div');
entry.innerHTML = text;
log.appendChild(entry);
}
function decodeAudioData(context, arrayBuffer) {
return new Promise(async (resolve, reject) => {
if (false) {}
else if (context.decodeAudioData.length == 1) {
// console.log('decodeAudioData / Way 1');
let audioBuffer = await context.decodeAudioData(arrayBuffer);
resolve(audioBuffer);
}
else if (context.decodeAudioData.length == 2) {
// necessary for iPhone (Safari, Chrome) and Mac (Safari). Could change a near future.
// console.log('decodeAudioData / Way 2');
context.decodeAudioData(arrayBuffer, function onSuccess(audioBuffer) {
resolve(audioBuffer);
});
}
});
}
function fetch(url) {
return new Promise((resolve, reject) => {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
let num_channels = 2;
let sample_rate = 44100;
let range_from = 0; // Goal: 306.6 seconds
let range_length = (sample_rate / num_channels) * 5.2; // Goal: 5.2 seconds
let range_to = range_from + (range_length - 1); // "range_to" is inclusive (confirmed)
request.setRequestHeader("Range", "bytes=" + range_from + "-" + range_to);
request.onload = function() {
let arrayBuffer = request.response;
let byteArray = new Uint8Array(arrayBuffer);
// console.log(Array.from(byteArray)); // just logging info
resolve(arrayBuffer);
}
request.send();
});
}.log {
display: inline-block;
font-family: "Courier New", Courier, monospace;
font-size: 13px;
margin-top: 10px;
padding: 4px;
background-color: #d4e4ff;
}
.divider {
border-top: 1px solid #ccc;
margin: 10px 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.1/sprintf.min.js"></script>
<button class="button_option_1">Option 1</button>
<button class="button_option_1_play">Play</button><br />
<div class="log">[empty]</div>这里有对应的CodePen.io：
https://codepen.io/anon/pen/RYXKmP
能否请您为range_from 提供正确的值并将其用于CodePen.io 上的分叉代码？
相关问题：https://engineering.stackexchange.com/questions/23929
[编辑 1]
这里有一个更简单的CodePen.io:https://codepen.io/anon/pen/YJKVde，它专注于检查浏览器在给定随机位置的情况下移动到下一个有效帧的能力。
在我做的一个快速实验中，使用{ Windows 10, Android, iPhone } x { Native browser, Chrome, Firefox } 的组合，上面的代码只适用于：{ (Windows 10, Chrome), (Android, Chrome), (Android, Native browser) }。
很遗憾它不起作用：
{ (iPhone, Safari), (iPhone, Chrome), (Windows 10, Firefox), (Android, Firefox) }
有没有办法可以向浏览器开发者提交一个请求来关注这个？
Google Chrome 在Windows 10 和Android 上的表现非常好。
如果其他浏览器也这样做会很有趣。
谢谢！
【问题讨论】：
标签： javascript html xmlhttprequest web-audio-api audiocontext