您好我正在尝试制作一个可以通过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中工作。
有什么想法吗?
如果有人知道一个更简单的解决方案,也将不胜感激。
答案 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();
变量。请参阅下面的工作示例,如果您有任何其他问题,请告诉我。
<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;