我正在尝试编写一个网页来在我外出时播放我的音乐。 我在 iframe 中有一个音乐目录列表。我有一个 javascript 音频播放器功能来播放专辑。 我只需要通过将列出 iframe 的目录中单击的内容传递给 javascript 音频播放器来将两者链接在一起。
我尝试过使用以下方法，但没有成功。
iframeDoc.addEventListener 和 iframeDoc.attachEvent
我不确定这些是否适用于 iframe 中的链接或仅适用于 iframe 本身（这些网页上的文档相当晦涩）。
我进行了大量的谷歌搜索并遇到了 JQuery 和 DOM。我都不明白。 我还了解到我可以使用 postMessage API，但没有给出如何使用它的详细信息。
任何帮助将不胜感激。
Thank You.
这个问题现在已经演变了。我已经停止使用带有目录列表的 iframe，现在我在 html 主页面中列出了音乐。我可以将要播放的专辑的参数发送到音频播放器。但新的问题是音频播放器不会播放所选专辑。 音乐列表的格式如下：
100 Greatest One Hit Wonders 80<br>
<a href=audio_player.php?album=Music/100 Greatest One Hit Wonders 80/CD1>100 Greatest One Hit Wonders 80/CD1</a><br>
<a href=audio_player.php?album=Music/100 Greatest One Hit Wonders 80/CD2>100 Greatest One Hit Wonders 80/CD2</a><br>
<a href=audio_player.php?album=Music/100 Greatest One Hit Wonders 80/CD3>100 Greatest One Hit Wonders 80/CD3</a><br>
<a href=audio_player.php?album=Music/100 Greatest One Hit Wonders 80/CD4>100 Greatest One Hit Wonders 80/CD4</a><br>
101 Pirate Radio Hits<br>
<a href=audio_player.php?album=Music/101 Pirate Radio Hits/CD1>101 Pirate Radio Hits/CD1</a><br>
<a href=audio_player.php?album=Music/101 Pirate Radio Hits/CD2>101 Pirate Radio Hits/CD2</a><br>
<a href=audio_player.php?album=Music/101 Pirate Radio Hits/CD3>101 Pirate Radio Hits/CD3</a><br>
<a href=audio_player.php?album=Music/101 Pirate Radio Hits/CD4>101 Pirate Radio Hits/CD4</a><br>
<a href=audio_player.php?album=Music/2001 A Space Odyssey>2001 A Space Odyssey</a><br>
7 Superb Albums of US Psychedelic Rock 1967-72<br>
等等...
其中一行被传递到音频播放器。 audio_player.php 的代码是：
<!DOCTYPE html>
<html>
<head>
<title>Simple Audio Player</title>
<meta charset="utf-8">
<link rel="stylesheet" href="audio.css">
<script src="audio.js"></script>
</head>
<body><div id="demo">
<!-- (A) AUDIO TAG -->
<audio id="demoAudio" controls></audio>
<!-- (B) PLAYLIST -->
<div id="demoList">
<?php
$_GET["album"];
# echo $_GET["album"];
$album_to_play = $_GET["album"];
# $music_dir = "Music/Fleetwood Mac Discography/1969 - Fleetwood Mac - English Rose";
$music_dir = "$album_to_play";
// (B1) GET ALL SONGS
# $songs = glob("$music_dir/*.{mp3,webm,ogg,wav}", GLOB_BRACE);
$songs = glob("$music_dir/*.{mp3,webm,flac,m4a,ogg,wav}", GLOB_BRACE);
// (B2) OUTPUT SONGS IN <DIV>
if (is_array($songs)) { foreach ($songs as $k=>$s) {
$name = basename($s);
printf("<div data-src='%s' class='song'>%s</div>", rawurlencode($name), $name);
}} else { echo "No songs found!"; }
?></div>
</div></body>
</html>
然后是audio.js 文件：
var aud = {
// (A) INITIALIZE PLAYER
player : null, // html <audio> element
playlist : null, // html playlist
now : 0, // current song
init : () => {
// (A1) GET HTML ELEMENTS
aud.player = document.getElementById("demoAudio");
aud.playlist = document.querySelectorAll("#demoList .song");
// (A2) LOOP THROUGH ALL THE SONGS, CLICK TO PLAY
for (let i=0; i<aud.playlist.length; i++) {
aud.playlist[i].onclick = () => aud.play(i);
}
// (A3) AUTO PLAY WHEN SUFFICIENTLY LOADED
aud.player.oncanplay = aud.player.play;
// (A4) AUTOPLAY NEXT SONG IN PLAYLIST WHEN CURRENT SONG ENDS
aud.player.onended = () => {
aud.now++;
if (aud.now>=aud.playlist.length) { aud.now = 0; }
aud.play(aud.now);
};
},
// (B) PLAY SELECTED SONG
play : id => {
// (B1) UPDATE AUDIO SRC
aud.now = id;
aud.player.src = "Music/101 Pirate Radio Hits/CD1/" + aud.playlist[id].dataset.src;
// (B2) A LITTLE BIT OF COSMETIC
for (let i=0; i<aud.playlist.length; i++) {
if (i==id) { aud.playlist[i].classList.add("now"); }
else { aud.playlist[i].classList.remove("now"); }
}
}
};
window.addEventListener("DOMContentLoaded", aud.init);
我整天都在玩这些文件，无法让音频播放器播放专辑。
Any help with this problem would be greatly appreciated.
Thank You.
David.