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

Question

我目前正在为我的音乐开发一个网站。一切都很好，但我想问一下（我做了 google 一点）是否可以在页面顶部创建一个持久的非 javascript html5 播放器作为 iframe ，它不会弄乱书签吗？此外，如果页面上的元素可以与 iframe 内的播放器交互，我会很高兴。谢谢！

Answer 1

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

如果您想要默认体验

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

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

如果您想单独设置样式，则需要单独的 HTML/JS。

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

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

另一个问题是将导航放在 iframe 中。您现在需要使用 JS 来跨越 iframe 边界，告诉 parent 更改页面（不好），或者依赖 link 标签的目标属性（同样不好）。

更糟糕的是，如果您做让所有这些工作正常，当 parent window 更改页面时，它将卸载 iframe，也是。

当然，您可以通过添加多个 iframes 来解决该问题，然后使用 parent 页面来管理 URL 以及所有 [=92] 之间的通信=]，但这是一个 double-plus 不好的主意，原因太多了。

如果您想保持可收藏性，同时还支持永不停止的持久播放器，而不是大多数令人头疼的问题，我建议您查看 Angular 和 angular-router 之类的东西模块。

有一个学习曲线，但如果您的其余页面只是静态 .html 文件，那么您应该有一个非常直接的路径运行在 [=] 中设置导航和播放器86=]，在更改 URL 时将换出页面的主要内容，而不会离开页面（因此，玩家可以继续播放）。

还有其他解决方案；你甚至不需要 framework/router，但如果你不喜欢做 nitty-gritty JS+[=，在这种情况下 Angular 为你吞下的 DiY 痛苦量是相当大的93=]+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 入门，具有 none 的基础知识：

// 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

这是媒体元素的 link 到 API。

MDN 也有一本不错的 JS 入门入门书。

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

Making a persistent non js html5 player

javascript

iframe

html5-audio

编辑