javascript - HTML5音频-播放器仅加载和播放列表中的第一个文件

Question

我为petproject创建了简单的翻页卡局部 View :

    <div class="cardBox">
        <div class="card">
            <div class="front">
                <h3>@Model.AccentedWord</h3>
                <p>[@Model.Pronunciation]</p>
            </div>
            <div class="back">
                <h2>@Model.Translation</h2>
                <h3><a asp-controller="Top1kWords" asp-action="Details" asp-route-id="@Model.WordId">@Model.AccentedWord</a></h3>
                <div>
                    <audio id="player" src="@Model.AudioUrl" type="audio/mpeg" ></audio>
                    <a onclick="document.getElementById('player').play()"><i class="far fa-play-circle fa-2x"></i></a>
                </div><button>Do nauki</button>
            </div>
        </div>
    </div>

翻转卡生成正确，播放器加载了不同的audioUrl，但是所有翻转卡仅播放首次加载的声音。
翻转卡nr1具有 <audio id="player" src="/sounds/Top1kWords/1.mp3" type="audio/mpeg" ></audio>翻转卡nr2具有 <audio id="player" src="/sounds/Top1kWords/2.mp3" type="audio/mpeg" ></audio>翻转卡nr3具有 <audio id="player" src="/sounds/Top1kWords/3.mp3" type="audio/mpeg" ></audio>但是他们都只播放1.mp3吗？
我可以让每个按钮播放自己的声音吗？
如果是标准播放器-一切正常，但我只需要“播放按钮”而不是完整播放器。

Answer 1

Thx @ anova01:
我创建了唯一的音频ID，并且一切正常:
div>