时间戳

首页 > 解决方案 > 为什么我的按钮不引用我想要的音频链接？

javascript - 为什么我的按钮不引用我想要的音频链接？

问题描述

我正在尝试制作一个 Web 应用程序，其中一个部分是一项功能，您可以通过单击鼠标来播放/暂停不同的歌曲。问题是如果一个页面上有多首歌曲，所有的播放/暂停按钮只适用于一首歌曲（最后一首添加的歌曲）。如何修复它以使每个播放/暂停按钮都对应一首特定的歌曲？我已经用音频 id 试过了，但它不起作用。这是我的部分代码的 HTML/JS：

   {% for song, posts in posts_dict.items() %}

    <div>
        <audio id="{{ song.song_uri[14:] }}" src="{{ song.song_preview }}">
        </audio>
        <button onclick="play()" type="button">Play Song</button>
        <button onclick="pause()" type="button">Pause Song</button>
        <img src="{{ song.album_picture }}" alt="Album Picture">
        <script>
        function play() {
            var audio = document.getElementById("{{ song.song_uri[14:] }}");
            audio.play();
        }
        function pause() {
            var audio = document.getElementById("{{ song.song_uri[14:] }}");
            audio.pause();
        }
        </script>
    </div>
{% endfor %}

这是代码的 Javascript 控制台。所有的引用似乎都是有序的（即按钮映射到正确的音频链接），所以我不明白为什么它默认为添加的最后一首歌曲。 Javascript 控制台

标签： javascriptpythonhtmlflask

解决方案

将脚本标签放在 for 循环之外并播放和暂停 pause 传递音频的 ID

{% for song, posts in posts_dict.items() %}

    <div>
        <audio id="{{ song.song_uri[14:] }}" src="{{ song.song_preview }}">
        </audio>
        <button onclick="play({{ song.song_uri[14:] }})" type="button">Play Song</button>
        <button onclick="pause({{ song.song_uri[14:] }})" type="button">Pause Song</button>
        <img src="{{ song.album_picture }}" alt="Album Picture">
    </div>
{% endfor %}

您在 for 循环中添加的 id

  <script>
        function play(id) {
            var audio = document.getElementById(id);
            audio.play();
        }
        function pause(id) {
            var audio = document.getElementById(id);
            audio.pause();
        }
        </script>

推荐阅读