栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何使用HTML5音频API播放从XMLHTTPRequest返回的音频

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何使用HTML5音频API播放从XMLHTTPRequest返回的音频

不幸的是,与Chrome的HTML5 Audio实现不同,Chrome的Web Audio 不支持audio / ogg; precs =
opus
,这是您的请求在此处使用的。您需要将格式设置

audio/wav
为此起作用。为确保将其传递到服务器请求,建议将其放入查询字符串(
accept=audio/wav
,urlenpred)中。

您只是想播放音频,还是需要访问Web Audio API进行音频转换?如果您只需要播放音频,我可以向您展示如何使用HTML5 Audio
API(而不是Web Audio)轻松地播放音频。借助HTML5音频,您可以使用以下技术进行流式传输, 并且
可以使用最佳

audio/ogg;precs=opus
格式。

这就像通过以下方式从DOM动态设置音频元素的来源一样简单:

(以HTML格式)

<audio id="myAudioElement" />

(在您的JS中)

var audio = document.getElementById('myAudioElement') || new Audio();audio.src = yourUrl;

您还可以通过XMLHttpRequest设置音频元素的来源,但不会获得流式传输。但是,由于可以使用POST方法,因此您不限于GET请求的文本长度(对于此API,〜6KB)。要在xhr中进行设置,请从Blob响应中创建一个数据uri:

    xhr.open('POST', enpreURI(url), true);    xhr.setRequestHeader('Content-Type', 'application/json');    xhr.responseType = 'blob';    xhr.onload = function(evt) {      var blob = new Blob([xhr.response], {type: 'audio/ogg'});      var objectUrl = URL.createObjectURL(blob);      audio.src = objectUrl;      // Release resource when it's loaded      audio.onload = function(evt) {        URL.revokeObjectURL(objectUrl);      };      audio.play();    };    var data = JSON.stringify({text: yourTextToSynthesize});    xhr.send(data);

如您所见,使用XMLHttpRequest,您必须等到数据完全加载才能播放。有 可能
是一种方式,从XMLHttpRequest来流使用非常新媒体来源扩展API,这是目前仅适用于Chrome和IE(无火狐或Safari)可用。这是我目前正在尝试的一种方法。如果成功,我会在这里更新。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/401549.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号