Javascript 制作一个持久的非js html5播放器

我目前正在为我的音乐开发一个网站。这一切都很好，但我想问（我用谷歌搜索了一下）有没有可能在页面顶部创建一个持久的非javascript html5播放器作为iframe，而不破坏书签功能？此外，我希望页面上的元素能够与iframe中的播放器交互。谢谢

正如@KJPrice所指出的，这里没有什么可以做的，这在某种程度上与JS无关

如果你想要默认的体验

<header>
  <nav ><!-- ... --></nav>
  <audio src="..." controls></audio>
</header>

然后，在浏览器中写入、保存和加载该页面后，打开DevTools并转到console选项卡

快速JS入门，无需任何基础知识：

// this double-slash is a single-line comment
/*
  this is a multi-line comment
  just like CSS
*/

// console.log is a method (or function), which will print whatever you pass it into the console tab
// it's a good way of starting to see what's going on inside of a program;
// there are better ways of understanding in the future, but to get your hands dirty, it's just fine
// console.log( ANY DATA, OTHER DATA, MORE DATA );
console.log(1, 2, 3); // prints "1  2  3"

// `var` is a keyword, representing a variable (just like algebra, a word representing something to be calculated/used)
// only use `var` when you're creating the variable, not after it's been created and you're interacting with it
// name it something meaningful; in a real program, there will be *lots* of them...  ...naming them all "a" is counterproductive
var song = document.querySelector("audio");

// to play the song, use
song.play();

// to pause the song, use
song.pause();

// to see how many seconds you are currently into the song, use
console.log(song.currentTime);

// to see how many seconds are in the song use
console.log(song.duration);

// to rewind the song, set
song.currentTime = 0;

// if you want to know how far along you are in the song, you can do something like
var time = song.currentTime;
var totalTime = song.duration;
console.log( time / totalTime * 100 );

注意，我可以给我想要的任何东西命名

song

。。。

var音频=…

，

var播放器=…

，

var媒体=…

只需要做有意义的事情

您可以做的另一件事是创建您自己可以运行的函数：

function playSong (song) {
  song.play();
}

function pauseSong (song) {
  song.pause();
}

function seekSong (song, time) {
  song.currentTime = time;
}

function stopSong (song) {
  pauseSong(song);
  seekSong(song, 0);
}

同样，在定义了类似这样的内容之后，您可以调用它们，类似于之前调用

.play（）

和

.pause（）

的方式

playSong( song );

pauseSong( song );

stopSong( song );

seekSong( song, 30 ); // seek to 30 seconds in

这是指向媒体元素API的链接

---

MDN还提供了一个学习JS的入门教程。

首先，查看

音频
元素。不需要javascript。你的最后一个问题需要澄清一下。“如果页面上的元素可以与iframe中的播放器交互”是什么意思？元素是否在
iframe
中？或者它们在父窗口中？如果它们在父窗口中，那么iframe是否与父窗口在同一个域中？我还没有得到一个域，在本地执行所有这些操作。但要回答你的问题，不，元素在外面。我的想法是让iframe包含导航和播放器，然后在它下面是页面内容。因此，如果页面内容像一个播放相册的按钮，那么是否可以告诉iframe播放器播放该相册？是的，我强烈建议取消iframe，除非它是完全必要的（即，您无法控制它）。如果完全必要，您可能需要使用类似于
postMessage
的内容。这是一个不错的演示过程，那么音频元素是否可以设置样式？我喜欢设计东西，我希望它能很好地安装在导航栏上，成为一种平的、最小的东西。无论如何，谢谢你的帮助，如果我需要更多帮助，我会回到这里。好吧，现在是学习JavaScript的时候了。这很难学，因为我听说一旦你掌握了窍门就很容易了。我大概用了9个月的时间就完全学会了HTML。在每一款不同的浏览器（主要是旧IE、旧Safari和旧Android）上学好它，并理解它的所有细微差别，可能需要几年时间。。。但你现在并不是真的想成为一名工匠，而是想解决一些问题。对于一首歌，播放器所需的大部分JS都是非常基本的。我想从那里开始吧。你会学到更多，不用担心。还有一件事可以让你走；加载一个简单的页面，只包含一个音频标签，用HTML设置（就像您通常会做的那样），然后在浏览器中加载该页面，并使用
var player=document.querySelector（“音频”）（在Chrome/FF/dev工具中）。然后可以使用
player.play（）
，
player.pause（）等等。它没有向前、向后或停止（您可以在将来编写它们和其他代码）。您可以设置
player.currentTime=0重新开始。搜索“MDN HTMLMEDIALEMENT”<设置代码>属性（如
.currentTime=0
），运行方法（
.play（）
）
playSong( song );

pauseSong( song );

stopSong( song );

seekSong( song, 30 ); // seek to 30 seconds in