javascript - 如何播放选定的歌曲？-6ren

javascript - 如何播放选定的歌曲？

转载作者：行者123 更新时间：2023-12-04 11:39:14

我有这个小 html 文本，我可以在其中选择一些我想听的歌曲。
怎么从这里我可以按下播放按钮，我选择的歌曲一个接一个地播放。换句话说，按顺序，第二个只有在第一个完成后才开始。
谢谢
'
新的 HTML 和脚本

<table id="tblsounds">
<tr>
<td><input id="chk1"  type="checkbox" value="1" /><label for="chk01">Song nº 1</label></td>
</tr>
<td><input id="chk2"  type="checkbox" value="2" /><label for="chk02">Song nº 2</label></td>
</tr>
<tr>
<td><input id="chk3"  type="checkbox" value="3" /><label for="chk03">Song nº 3</label></td>
</tr>
<tr>
<td><input id="chk4"  type="checkbox" value="4" /><label for="chk04">Song nº 4</label></td>
</tr>
<tr>
<td><input id="chk5"  type="checkbox" value="5" /><label for="chk05">Song nº 5</label></td>
</tr>
<tr>
<td><input id="chk6"  type="checkbox" value="6" /><label for="chk06">Song nº 6</label></td>
</tr>
<tr>
<td><input id="chk7"  type="checkbox" value="7" /><label for="chk07">Song nº 7</label></td>
</tr>
<tr>
<td><input id="chk8"  type="checkbox" value="8" /><label for="chk08">Song nº 8</label></td>
</tr>
<tr>
<td><input id="chk9"  type="checkbox" value="9" /><label for="chk09">Song nº 9</label></td>
</tr>

<br><br>

</table>
 
 
<input type = "button" value = "Get" onclick = "GetSelected()" />

    <button onClick="window.location.reload();">Remake your Playlist</button>

<script type="text/javascript">
  function GetSelected() {
        //Create an Array.
        var selected = new Array();
 
        //Reference the Table.
        var tblsounds = document.getElementById("tblsounds");
 
        //Reference all the CheckBoxes in Table.
        var chks = tblsounds.getElementsByTagName("INPUT");
 
        // Loop and push the checked CheckBox value in Array.
        for (var i = 0; i < chks.length; i++) {
            if (chks[i].checked) {
                selected.push(chks[i].value);
            }
        }
 
        //Display the selected CheckBox values.
        if (selected.length > 0) {
            alert("Selected values: " + selected.join(","));
        }
    };
</script>

Like this i get a array as result.

https://codepen.io/luis-pedro-the-sans/pen/rNmLYRp

最佳答案

有很多事情需要考虑。我为您准备了更新的代码，但请尝试了解那里发生了什么。让我们从 HTML 开始:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Playlist</title>
    <script src="playlist.js" defer></script>
</head>
<body>
    <table id="tblsounds">
        <tr>
            <td>
                <label>
                    <input type="checkbox" value="sound/1.mp3">
                    Song nº 1
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox" value="sound/2.mp3">
                    Song nº 2
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox" value="sound/3.mp3">
                    Song nº 3
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox" value="sound/4.mp3">
                    Song nº 4
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox" value="sound/5.mp3">
                    Song nº 5
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox" value="sound/6.mp3">
                    Song nº 6
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox" value="sound/7.mp3">
                    Song nº 7
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox" value="sound/8.mp3">
                    Song nº 8
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox" value="sound/9.mp3">
                    Song nº 9
                </label>
            </td>
        </tr>
    </table>
    <button id="clear" type="button">
        Remake your Playlist
    </button>
</body>
</html>

没什么太花哨的，我用他们的 <label>包裹了复选框克服使用 id 的需要.另外，我的文件路径为 value ，因为我们将使用它来跟踪当前正在播放的歌曲。只是其中一种方法。如您所见，我将音频保存在 sound/ 中。文件夹，因此如果您要将音频文件保存在其他位置，请更新值。
现在，更难的部分。这是 playlist.js 中更新的 JavaScript带有注释的文件:

'use strict';

const audio = new Audio();
const playlist = [];

document.getElementById('tblsounds').addEventListener('click', event => {
    const isCheckbox = event.target.matches('input[type=checkbox]');

    if (!isCheckbox) return;

    const songFileName = event.target.value;

    if (event.target.checked) {
        // Adding the song to the playlist
        playlist.push(songFileName);

        if (playlist.length === 1) {
            audio.src = songFileName;
            audio.play();
        }
    } else {
        // Removing the song from the playlist
        const songIndex = playlist.indexOf(songFileName);

        if (songIndex >= 0) {
            const audioSrc = audio.getAttribute('src');

            if (audioSrc === songFileName) {
                audio.pause();

                const nextSongIndex = songIndex + 1;

                if (nextSongIndex < playlist.length) {
                    audio.src = playlist[nextSongIndex];
                    audio.play();
                }
            }

            playlist.splice(songIndex, 1);
        }
    }
});

document.getElementById('clear').addEventListener('click', () => {
    // Clear all checkboxes
    document.getElementById('tblsounds').querySelectorAll('input[type=checkbox]').forEach(checkbox => {
        checkbox.checked = false;
    });

    // Empty the playlist
    playlist.splice(0, playlist.length);

    audio.pause();
});

audio.addEventListener('ended', event => {
    // Play the next song if available
    const audioSrc = event.currentTarget.getAttribute('src');
    const playlistIndex = playlist.indexOf(audioSrc);

    if (playlistIndex >= 0) {
        const nextSongIndex = playlistIndex + 1;

        if (nextSongIndex < playlist.length) {
            audio.src = playlist[nextSongIndex];
            audio.play();
        }
    }
});

如您所见，我们不断更新 playlist 的内容与复选框交互时的数组。它会在当前歌曲完成后播放下一首歌曲，但前提是播放列表中有下一首歌曲。
我知道我们通常不会在 Stack Overflow 上发布完整的解决方案，但是由于您是初学者并且想要做一些非常复杂的事情(而且很有趣!)，所以我决定帮助您。我希望你能从中学习:)

关于javascript - 如何播放选定的歌曲？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68298358/

文章推荐： AngularJS ng-include

文章推荐： reveal.js - 使用reveal.js进行声音过渡

文章推荐： angularjs - 带有 Bootstrap 3 的 bower

文章推荐： python - 重新排列字符串中的数字

CSS 选定/事件属性
我有十二个指向不同类别的链接。作为用户定位的一种方式，我想强调用户现在所在的类别( - 按钮)。如何在 CSS 中实现这一点？我读到了 selected和 active ，但我还没能让它发挥作用。
jquery - 如何获取选择框中的所有选项值(选定/未选定)
我想通过单击按钮来获取选择框中的所有选项值(选定/未选定)。我怎样才能做到这一点？最佳答案我认为这是使用 Traversing/map 的好机会方法: var valuesArray = $("#
java - Android - 如何保持按钮被单击(选定)？
我正在尝试构建一个计算器，其中包含两个数字的两个 TextView 字段。我弄清楚了如何使用“应用程序内”数字键盘输入顶部数字 Operand 1 [textView] 的数字(我知道使用 EditT
javascript - 选定 DOM 元素文本的算术
我有一个简单的 jQuery $("span.value")，它选择包含文本的节点。此文本保证为整数。如何计算所有选定节点文本的总和，并将总和放入另一个节点？ 3 4 5 ? 最佳答案你可以这样做:
mysql - 选定 mysql 数据库的备份授予权限
我从同一台服务器上托管的一堆数据库中备份了 mysql 数据库 db1。现在只需要备份具有访问 db1 权限的选定用户，以便我可以在 db1 还原之前将这些特权用户还原到我的新服务器。最佳答案 St
android - 选定 ListView 项的向上滑动动画
我有一个 ListView 。我想添加一个动画，如果我选择一个列表项，它将被删除，并且该项目下方的其余项目将通过向上滑动动画向上移动。我已经通过获取其子位置使用线性布局完成了此操作，但我无法理解如何向
python - 如何使用Python从outlook获取突出显示(选定)的邮件？
我不明白如何使用 Python 解析来自 Outlook 的突出显示(选定)邮件？我有这个代码，但它适用于上一封邮件。 import win32com.client outlook = win32c
ios - 选项卡栏项目 - 选定/未选定图标
在 Xcode 6 中，您现在可以为选项卡项目的选中和未选中状态设置图标。请参阅下图中的说明: 和唯一的问题是 SELECTED 状态的图像不显示。它只是显示空白。还有其他人有这个问题吗？请看下面的
c# - 使用数据库中的“选定”成员对组成员资格进行建模
在我的数据模型中，我有一个实体组和另一个GroupMember实体。一个Group包含一个或多个GroupMembers，但一个GroupMember只能同时位于一个Group中。到目前为止没有问题，
android - 按钮和正常/选定/按下状态之间的动画转换
Android Button 在不同状态(正常、按下、选中、禁用)之间移动时会更改其可绘制背景。背景切换是即时的。是否可以使其平滑(动画)？最佳答案是的，这是可能的。您只需为按钮添加 addAni
在 Emacs 中搜索标记(选定)文本
我使用 emacs 来查看和编辑代码和其他文本文件。我想知道是否有一种方法可以向前或向后搜索当前缓冲区中标记的文本。类似于我在记事本或写字板中可以执行的操作。就像我可以在缓冲区中标记一些文本并执行 C
javascript - 如何根据状态(选定、禁用)设置自定义选择类？
如何根据状态(选定、禁用)设置自定义选择类？如何根据状态选择(选定、禁用)在自定义下拉列表中设置类？照做了，但什么也没发生。请看我的例子................................
javascript - 使用 Jquery 在下拉菜单中查找文本并将其设置为“选定”
我正在尝试检查下拉菜单中是否存在特定文本值，如果存在，我想将其属性设置为selected。我成功编写了一个 if 语句来检查文本是否存在: var country = usr.location; i
java - 如何在java中获取android文本大小设置(最小，最大，选定)
对于我的应用程序，我想让用户能够在回收器 View 中调整 TextView 项目的文本大小(通过捏缩放或 SeekBar)。默认值应为系统设置中选择的文本大小。最小值应为系统设置中的“非常小”，最大
c# - 具有自定义边框的 WPF 选定 ListBoxItem
我正在尝试创建一个 ListBoxItem 模板，该模板在选择时将带有圆角边框。我得到了这个 xaml，它在选择时不起作用:
javascript - WebdriverIO - 如何检索当前焦点/选定/事件元素的 HTML？
我正在寻找检索焦点元素的 HTML。查看 webdriver.io 文档，方法 .getActiveElement() 应该可以解决这个问题。但是，我的 IDE (WebStorm) 显示错误，指出它
java - 选定 Canvas 的 Android 动画
我创建了一个圆，在我的 onDraw() 方法中围绕圆绘制了一条字符串和一条线(箭头)。 public class Circle extends Activity { public class
c# - MaterialDesignInXamlToolkit ElementHost DatePicker 选定/当前日期显示不正确
对于生产应用程序，我们希望在 Windows 窗体应用程序的 ElementHost 内显示 DatePicker，但我们遇到了 SelectedDate 和 CurrentDate 不可读的问题，因
php - 带单选按钮的 BIT 数据类型(选定/未选定)
好的，我在此处和 Google 上的许多网站上搜索了此问题的结果，但找不到针对我的问题的确切解决方案。我有一个 sql 提取姓名和办公室。所以事情是这样的: $sql = "SELECT m
iphone - 如何更改 UITableViewCell 选定 View 的颜色？
选中单元格时如何改变灰色？最佳答案当用户点击选中的行 (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSInd

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何播放选定的歌曲？