修改

Question

我正在为我的音乐开发一个网站。这一切都很棒，但是我想问一下（我确实谷歌了一下）是否有可能在页面顶部创建一个持久的非javascript html5播放器作为iframe，并且不要搞砸书签？另外，如果页面上的元素可以与iframe中的播放器进行交互，我很乐意。谢谢！

Answer 1

正如@KJPrice指出的那样，你在这里做的事情并不多，而且在某种程度上并不涉及JS。

如果您喜欢默认体验

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

...可用的样式非常有限，可供您使用。

如果你想单独设计一些东西，那就需要单独的HTML / JS。

此外，如果你想播放一张专辑（即：按顺序播放一堆mp3，每一个完成），那就需要更多的JS。

但你的替代方案并没有真正改变...... 如果您依赖于<audio controls>内的普通iframe标记，那么您将获得默认浏览器外观和，您需要JS在iframe之间进行通信，和你需要在iframe中使用JS来更改歌曲/管理播放器的播放列表，这是相同功能的2倍。

另一个问题是将导航放在iframe中。您现在需要使用JS来跨iframe边界进行通信，告诉父进程更改页面（错误），或者依赖链接标记的目标属性（也很糟糕）。

更糟糕的是，如果你做使所有这些工作正常，当父窗口更改页面时，它也将卸载iframe。

当然，你可以通过添加多个iframes来解决这个问题，然后使用父页面来管理所有孩子之间的URL和沟通，但这是一个双重优势，原因太多了。

如果您想保持书签性，同时还支持永不停止的持久性播放器，我建议您查看类似Angular和angular-router模块的内容，而不是大部分头痛。

有一个学习曲线，但如果你的其他页面只是静态.html文件，那么你应该有一个非常直接的路径来运行index.html中的导航和播放器，同时改变你的URL＃ 39;重新开启将换出页面的主要内容，而不离开页面（因此，播放器继续播放）。

还有其他解决方案;你甚至不需要一个框架/路由器，但是在这种情况下Angular为你吞下的DiY疼痛量相当大，如果你不喜欢做细节的JS + DOM + BOM + AJAX东西。

修改

鉴于你是JS的新手，我想我会在这里提供一些帮助：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  </head>
  <body>
    <audio src="./my-song.mp3" controls></audio>
  </body>
</html>

然后，在浏览器中编写，保存并加载该页面后，打开DevTools，然后转到控制台选项卡。

快速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 audio = ...，var player = ...，var media = ...。

只需处理有意义的事情。

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

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

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

这是媒体元素API的链接。

MDN在学习JS方面也有一个很好的入门。

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

1 个答案:

修改