在同时播放两个音频文件时启动其中一个静音
Posted
技术标签:
【中文标题】在同时播放两个音频文件时启动其中一个静音【英文标题】:Start one of the audio files muted when playing two at the same time 【发布时间】:2017-11-09 00:36:14 【问题描述】:我有两个音频文件同时开始,还有一个切换按钮,通过静音另一个来在两者之间切换。
一切都如我所愿,但当我按下播放时,我希望 audio2 开始静音。现在您可以同时听到它们。
https://jsfiddle.net/9z1dfm4p/
var audio1 = document.getElementById('audio1');
var audio2 = document.getElementById('audio2');
var button1 = document.getElementById('button1');
var isPlaying = false;
var muteToggle = true;
var play = function()
if (!isPlaying)
button1.innerhtml = 'Pause';
audio1.play(); // this stream will immediately stop when the next line is run on ios
audio2.play(); // this will stop audio1 on iOS
isPlaying = true;
else
button1.innerHTML = 'Play';
audio1.pause(); // this stream will immediately stop when the next line is run on iOS
audio2.pause(); // this will stop audio1 on iOS
isPlaying = false;
var mute = function()
if (muteToggle)
muteToggle = false;
audio1.muted = true;
audio2.muted = false;
else
muteToggle = true;
audio2.muted = true;
audio1.muted = false;
<audio id="audio1">
<source src="http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3" type="audio/mpeg" />
</audio><br />
<audio id="audio2">
<source src="https://allthingsaudio.wikispaces.com/file/view/Shuffle%20for%20K.M.mp3/139190697/Shuffle%20for%20K.M.mp3" type="audio/mpeg"/>
</audio><br />
<button onclick="play();" id="button1">Play</button><br />
<button onclick="mute();" id="button2">Toggle</button><br />
【问题讨论】:
【参考方案1】:您可以将第二个<audio>
设置为从一开始就静音。
<audio id="audio2" muted="true">
https://jsfiddle.net/9z1dfm4p/2/
编辑:清理代码并更好地显示正在播放的歌曲。
https://jsfiddle.net/9z1dfm4p/7/
【讨论】:
我也在尝试添加一个文本,让听众知道他们正在听哪个曲目,知道我该怎么做吗? 请查看 jsfiddle 的新版本(上图),它使用状态 div 来解决这个问题。以上是关于在同时播放两个音频文件时启动其中一个静音的主要内容,如果未能解决你的问题,请参考以下文章