如何阻止我的 HTML5/JavaScript 音轨同时播放答案

【问题标题】：How do I stop my HTML5/JavaScript audio tracks from playing at the same time如何阻止我的 HTML5/JavaScript 音轨同时播放
【发布时间】：2018-04-03 05:14:12
【问题描述】：

我有一个循环内的音轨（每当有人发布新音轨时），因此页面上会放置多个音轨。这是输出到页面上的 html：

<html>
<div class='wrap'>

    <audio id='music' preload='true'>
        <source src='$file' type='audio/mpeg'>
    </audio>

    <div class='player paused'>

    <div class='progress-bar'>
        <div class='runner'></div>
    </div>

    <div class='description'>
    <div class='title'>Something from nothing</div>
    <div class='sub-title'>by $username</div>
    </div>

    <div class='visualizer'>
    <div></div><div></div><div></div><div> 
    </div><div></div><div></div><div></div> <div></div><div></div>
    <div></div><div></div><div></div><div> 
    </div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div> 
    </div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div> 
    </div><div></div><div></div><div></div><div></div><div></div><div></div>
    <div></div><div></div><div></div><div> 
    </div><div></div><div></div><div></div><div></div><div></div><div></div>
                                </div>

    <div class='play-button'>
    div class='lp-background'></div>
    <i class='fas fa-play' id='playpress></i>                         
    </div>

    <div class='time-indicator'>
    <i class='fas fa-clock'></i>
    <span class='time'>03:39</span>
    </div>

    </div>
    </div>
</div>
</html>

所有这些 div 都用于动画栏，这是我的 JavaScript：

var $visualizers = $('.visualizer>div');
var $progressBar = $('.progress-bar');
var $progressBarRunner = $progressBar.find('.runner');
var songLength = 219; //in seconds
var percentage = 0
var $time = $('.time');
var $player = $('.player');

var playRunner = null;

function go() {
playRunner = setInterval(function() {
//visualizers
$visualizers.each(function() {
  $(this).css('height', Math.random() * 90 + 10 + '%');
});
//progress bar
percentage += 0.15;
if (percentage > 100) percentage = 0;
$progressBarRunner.css('width', percentage + '%');

$time.text(calculateTime(songLength, percentage));
}, 250);
};

$('.play-button').on('click', function() {
$player.toggleClass('paused').toggleClass('playing');
if (playRunner) {
clearInterval(playRunner);
playRunner = null;
$time.text(calculateTime(songLength, 100));
} else {
percentage = 0;
go();
}
});

$('.progress-bar').on('click', function(e) {
var posY = $(this).offset().left;
var clickY = e.pageX - posY;
var width = $(this).width();

percentage = clickY / width * 100;
});

function calculateTime(songLength, percentage) {
//time
var currentLength = songLength / 100 * percentage;
var minutes = Math.floor(currentLength / 60);
var seconds = Math.floor(currentLength - (minutes * 60));
if (seconds <= 9) {
return (minutes + ':0' + seconds);
} else {
return (minutes + ':' + seconds);
}
}

clearInterval(playRunner);

我的问题是，当我按下其中一首曲目的播放按钮时，它们都同时开始播放。我想使它在单击时一次只播放一首曲目。我不确定是否可以在 html 或 javascript 文件中更改它，或者我是否只是以不同的方式去做。

【问题讨论】：

标签： javascript html audio web-audio-api

【解决方案1】：

在 HTML 中 id 属性应该是唯一的。尝试删除 id='music'。

【讨论】：