英文:
How to get MIME type of audio stream?
问题
我想在 Web 电台播放时显示一种音频类型（mp3、ogg、aac 等）。
我的播放器代码简单如下：
let audio = new Audio;
audio.addEventListener('loadeddata', () => audio.play());
audio.src = 'https://some-radio-station.com/stream';
我发现没有办法使用 Web 音频 API 获取文件或HTTP响应的元数据。也许可以使用 fetch 来加载流的一小部分？
顺便问一下，有没有方法检测音频的比特率？
英文:
I want to display a type of audio (mp3, ogg, aac e.t.c) while a Web radio station playing.
My player code is simple in briefly:
let audio = new Audio;
audio.addEventListener('loadeddata', () => audio.play());
audio.src = 'https://some-radio-station.com/stream';
I found no way to get file or HTTP response metadata using web audio API. May be is possible to load a short part of stream using fetch?
By the way is there a method to detect audio bitrate too?
答案1
得分: 1
以下是翻译好的代码部分：
//module
function ObtainStreamHeaders(src) {
return new Promise((resolve, reject) => {
const controller = new AbortController;
fetch(src, {signal: controller.signal})
.then(response => {
controller.abort();
let headers = {};
for (var pair of response.headers.entries()) {
headers[pair[0]] = pair[1];
}
resolve(headers);
})
.catch(e => reject(e));
});
}
export default ObtainStreamHeaders;
//using
import ObtainStreamHeaders from './ObtainStreamHeaders.js';
audio.onplaying = () => ObtainStreamHeaders(audio.src)
.then(headers => {
document.getElementById('mime').innerText =
headers['content-type'] || 'unknown';
document.getElementById('br').innerText = headers['icy-br'] ?
(parseInt(headers['icy-br'], 10) + 'kbps') : 'unknown';
});
希望这对您有所帮助。如果您需要进一步的翻译或帮助，请告诉我。
英文:
The way I could make work:
//module
function ObtainStreamHeaders(src) {
return new Promise((resolve, reject) => {
const controller = new AbortController;
fetch(src, {signal: controller.signal})
.then(response => {
controller.abort();
let headers = {};
for (var pair of response.headers.entries()) {
headers[pair[0]] = pair[1];
}
resolve(headers);
})
.catch(e => reject(e));
});
}
export default ObtainStreamHeaders;
//using
import ObtainStreamHeaders from './ObtainStreamHeaders.js';
audio.onplaying = () => ObtainStreamHeaders(audio.src)
.then(headers => {
document.getElementById('mime').innerText =
headers['content-type'] || 'unknown';
document.getElementById('br').innerText = headers['icy-br'] ?
(parseInt(headers['icy-br'], 10) + 'kbps') : 'unknown';
});
This code downloads a small part of an audio stream and gets server headers
答案2
得分: 0
你可以发出第二个请求，就像你已经提议的那样。实际上，即使使用Fetch API本身，也可以只获取头部，以保持服务器负载较低。请参阅现有答案：https://stackoverflow.com/a/47241400/79485
fetch(url, { method: 'HEAD' })
然后提取content-type头部以获取内容类型。
要获取媒体文件/流本身的其他元数据，您仍然需要获取实际内容。并非所有媒体格式都以相同的元数据格式提供。您需要分别处理每种格式。
技巧
然而，如果您只对近似比特率感兴趣，并且知道音频的持续时间（假设已加载到音频元素中），并且头部提供了content-length信息，您可以像这样计算原始比特率：https://stackoverflow.com/a/21663002/79485。这已经在这里完成了：https://stackoverflow.com/a/11587642/79485。
英文:
You could issue a second request, as you already propose. It's actually possible to get the headers only, keeping server load low, even with the Fetch API itself. See this existing answer: https://stackoverflow.com/a/47241400/79485
fetch(url, {method: 'HEAD'})
Then extract the content-type header to get the, well, content type.
To get other metadata of the media file / stream itself, you still would need to get actual content. Not all media formats provide the same metadata, and in the same format. You would need to handle each format separately.
Cheat
If you, however, are only interested in approximate bitrates, and know the duration of your sound (given it's already loaded in the audio element), and the headers provide an content-length info, you can calculate the raw bitrate like this: https://stackoverflow.com/a/21663002/79485. It's already been done here: https://stackoverflow.com/a/11587642/79485
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论