同时播放两个时,启动其中一个静音的音频文件

问题描述 投票:0回答:1

我有两个音频文件同时启动,还有一个切换按钮,通过静音另一个来切换两者。

一切都按照我的意图,但当我按下播放时,我希望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 />
javascript jquery audio jplayer audio-player
1个回答
0
投票

您可以将第二个<audio>设置为从头开始静音。

<audio id="audio2" muted="true">

https://jsfiddle.net/9z1dfm4p/2/

编辑:清理代码并更好地显示正在播放的歌曲。

https://jsfiddle.net/9z1dfm4p/7/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.