需要显示javascript数组的不同部分

时间:2016-10-11 08:53:42

标签: javascript jquery html5-audio audio-streaming web-audio

您好我正在尝试制作一个可以通过javascript在网站上播放歌曲的音乐播放器。

我在尝试切割数组以取出歌曲时遇到问题。

var files = [" roc-boys.mp3",// - Jay Z.              " dirt.mp3",// - Jay Z.              " 99.mp3",// - Jay Z.              " feelin-it.mp3",// - Jay Z.         ];

这就是我如何布置阵列。

function createAudioElements() {
     files = files.slice(5,9);
    for (f in files) {
        var audioString = "<audio id=\"audio-" + f + "\" class=\"audio\" preload=\"true\"><source src=\"audio/" + files[f] + "\"></audio>";



function createAudioElements() {
           files = files.slice(5,9);
           for (f in files) {
           var audioString = "<audio id=\"audio-" + f + "\" class=\"audio\" preload=\"true\"><source src=\"audio/" + files[f] + "\"></audio>";

        $("#audio-players").append(audioString);

    }
}


    function createAudioPlayers() {
    for (f in files) {
        var playerString = "<div id=\"audioplayer-" + f + "\" class=\"audioplayer\"><button id=\"playbutton-" + f + "\" class=\"play playbutton\"></button><div id=\"timeline-" + f + "\" class=\"timeline\"><div id=\"playhead-" + f + "\" class=\"playhead\"></div></div></div>";
        $("#audio-players").append(playerString);
    }
}

这是将歌曲加载到html中的方式。 问题是我无法让它在超过1个div中工作。

有什么想法吗?

如果有人知道一个更简单的解决方案,也将不胜感激。

1 个答案:

答案 0 :(得分:0)

正如我所说,有两个主要问题,使用id只能使用第一个元素。 您使用slice函数覆盖全局createAudioElments列表的另一个重要问题。这意味着通过第一次调用files,它会将createAudioPlayers数组从第5个元素更新为第9个元素,并通过调用相同或files函数将它分配一个空数组到var files = new Array(9).fill(1); function createAudioElements() { for (f in files.slice(5,9)) { var audioString = "<audio id=\"audio-" + f + "\" class=\"audio\" preload=\"true\"><source src=\"audio/" + files[f] + "\"></audio>"; $(".audio-players").append(audioString); } } function createAudioPlayers() { for (f in files.slice(5,9)) { var playerString = "<div id=\"audioplayer-" + f + "\" class=\"audioplayer\"><button id=\"playbutton-" + f + "\" class=\"play playbutton\"></button><div id=\"timeline-" + f + "\" class=\"timeline\"><div id=\"playhead-" + f + "\" class=\"playhead\"></div></div></div>"; $(".audio-players").append(playerString); } } createAudioPlayers(); createAudioElements();变量。请参阅下面的工作示例,如果您有任何其他问题,请告诉我。

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="audio-players">
  <span>First player</span>
</div>
<div class="audio-players">
  <span>Second player</span>
</div>
&#13;
        <RelativeLayout
            android:id="@+id/email_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <android.support.v7.widget.AppCompatSpinner
                android:id="@+id/spinner"
                style="@style/MailSpinner"
                android:layout_width="120dp"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:dropDownWidth="wrap_content" />
            <android.support.design.widget.TextInputLayout
                android:id="@+id/text_input_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                android:layout_alignBaseline="@id/spinner"
                android:layout_toStartOf="@id/spinner"
                android:baselineAlignedChildIndex="0">
                <android.support.v7.widget.AppCompatEditText
                    android:id="@+id/edit_text"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="E-mail"
                    android:ellipsize="end"
                    android:imeOptions="actionNext"
                    android:inputType="textEmailAddress"
                    android:textSize="16sp"/>
            </android.support.design.widget.TextInputLayout>


        </RelativeLayout>
&#13;
&#13;
&#13;