javascript – AudioContext平移播放媒体的音频

2019-06-24 19:24:56 阅读：176 来源： 互联网

标签：javascript html5 audio html5-video media-player

我想知道是否有办法用JavaScript平移视频的音频.

与调整音量的方式相同,我需要从左到右或从右到左平移立体声音频.

此功能对于多语言事件非常有用,您可以使用立体声生成两种语言的视频,例如,将英语音频转换为左侧,将德语转换为右侧.然后,播放器可以根据用户选择将立体声音轨转换为单声道静音中的一种语言.

我已经使用SoundTransform类http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/media/SoundTransform.html#pan在flash中实现了这个功能.

我猜SoundTransform html-equivalent是AudioContext http://www.w3.org/TR/webaudio/#AudioContext-section.

我可以访问播放视频的音频上下文吗？

更新：经过深入研究后,我找到了解决方案.
这是我用来开发videojs插件的一些javascript代码videjs-stereopanner：

//Init AudioContext
var context = new AudioContext();
var gainL = context.createGainNode();
var gainR = context.createGainNode();
gainL.gain.value = 1;
gainR.gain.value = 1;
var merger = this.context.createChannelMerger(2);
var splitter = this.context.createChannelSplitter(2);

//Connect to source
var source = context.createMediaElementSource(node);
//Connect the source to the splitter
source.connect(splitter, 0, 0);
//Connect splitter' outputs to each Gain Nodes
splitter.connect(gainL, 0);
splitter.connect(gainR, 1);

//Connect Left and Right Nodes to the Merger Node inputs
//Assuming stereo as initial status
gainL.connect(merger, 0, 0);
gainR.connect(merger, 0, 1);

//Connect Merger output to context destination
merger.connect(context.destination, 0, 0);

//Disconnect left channel and connect right to both stereo outputs
var function = panToRight(){
    gainL.disconnect();
    gainR.connect(merger, 0, 1);
};

//Disconnect right channel and connect left to both stereo outputs
var function = panToLeft(){
    gainR.disconnect();
    gainL.connect(merger,0,0);
}

//Restore stereo
var function = panToStereo(){
    gainL.connect(merger, 0, 0);
    gainR.connect(merger, 0, 1);
}

这仅适用于Chrome.如果我尝试在iPad / Safari上执行此脚本,我会听到令人讨厌的声音,这几乎让我感到沮丧.我等待Safari实现整个Audio API.

解决方法:

由于还没有接受这个答案,我还是想帮助你.首先,来自上面答案的计划者节点不能很好地使用,因为它根据(另一)方向上的3维位置,方向和速度计算音量和平移.正如Mantiur已经声明的那样,您可以使用channelSplitter来获得所需的结果.您可以这样设置：

var element = document.getElementById('player');
Var source = context.createMediaElementSource(element);
var splitter = context.createSplitter(2);
source.connect(splitter);
var left = context.createGain();
var right = context.createGain();
splitter.connect(left);
splitter.connect(right);

您现在可以将左或右节点连接到context.destination,具体取决于用户需要的两个节点.
请记住,只有chrome和Firefox支持网络音频API.

更新的答案:(更新的问题)

你的代码看起来不错,但是将左边和右边的增益设置为0或1而不是断开并连接它们要好得多.对于当前的问题,您将遇到单耳问题,但是您最好不要使用合并,而只是将音频直接推送到目的地(或通过额外的增益节点来设置最终音量.还要注意您的代码可能在chrome上工作,但在我使用的版本上这不起作用,因为context.createGain()和context.createGainNode()中有一个命名问题.official document使用.createGain,所以我们最好坚持下去并创建后备：

context.createGain = context.createGain||context.createGainNode;

这可能会解决iOS设备中的问题,就像我们在should be able to use那样.尽管MDN是关于Safari的兼容性的not sure.遗憾的是,由于Web音频API的行为,没有解决方法.让我们说源,它只有一个输出,但内部包含两个通道.没有其他方法可以拆分这些通道(起初我的想法就像source.connect(gainL,0,0);和source.connect(gainR,1,0);但由于数字不起作用与输入/输出的数量有关,而不是与这些线内的通道有关).

所以我建议将代码更改为：

//Init AudioContext
window.audioContext = window.audioContext||window.webkitAudioContext; //fallback for older chrome browsers
var context = new AudioContext();
context.createGain = context.createGain||context.createGainNode; //fallback for gain naming
var gainL = context.createGain();
var gainR = context.createGain();

var splitter = this.context.createChannelSplitter(2);

//Connect to source
var source = context.createMediaElementSource(audioElement);
//Connect the source to the splitter
source.connect(splitter, 0, 0);
//Connect splitter' outputs to each Gain Nodes
splitter.connect(gainL, 0);
splitter.connect(gainR, 1);

//Connect Left and Right Nodes to the output
//Assuming stereo as initial status
gainL.connect(context.destination, 0);
gainR.connect(context.destination, 0);


//Mute left channel and set the right gain to normal
function panToRight(){
    gainL.gain.value = 0;
    gainR.gain.value = 1;
}

//Mute right channel and set the left gain to normal
function panToLeft(){
    gainL.gain.value = 1;
    gainR.gain.value = 0;
}

//Restore stereo
function panToStereo(){
    gainL.gain.value = 1;
    gainR.gain.value = 1;
}

哦,顺便说一下var函数= funcName(){}是无效的javascript(你使用的是一些改变这种行为的API)吗？

标签：javascript,html5,audio,html5-video,media-player
来源： https://codeday.me/bug/20190624/1281185.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – AudioContext平移播放媒体的音频