Making a persistent non js html5 player

Question

I'm currently developing a site for my music. It's going great and all, but I wanted to ask (I did google a bit) Is it possible to create a persistent non javascript html5 player as an iframe at the top of your page, and have it not mess up bookmarking? Additionally, I would love if elements on the page could interact with the player inside the iframe. Thanks!

Answer 1

As @KJPrice has pointed out, there isn't really much you can do here, that doesn't involve JS in some way.

If you'd like the default experience

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

...with very limited styling available to it, that's available to you.

If you want to style something separately, that's going to require separate HTML/JS.

Moreover, if you want to play an album (ie: play a bunch of mp3s in order, as each one finishes), that'll require more JS.

But your alternative doesn't really change that... If you're relying on a plain <audio controls> tag, inside of an iframe , then you are both getting the default browser look and you need JS to talk between iframes, and you need JS in the iframe to change songs / manage the playlist for the player, which is 2x the headache for the same functionality.

Another problem is putting the navigation in an iframe . You now need to either use JS to talk across the iframe boundary, to tell the parent to change the page (bad), or rely on target attributes of link tags (also bad).

Worse yet, if you do get all of this working, when the parent window changes the page, it is going to unload the iframe , too.

You can, of course, solve that by adding multiple iframes , and then use the parent page to manage the URLs and communication between all of the children, but that's a double-plus ungood idea, for way too many reasons.

Rather than most of this headache, if you want to maintain bookmarkability, while also supporting a persistent player, which never stops, I'd suggest looking at something like Angular and the angular-router module.

There's a learning curve, but if the rest of your pages are just static .html files, then you should have a pretty straight path for running the nav and player in index.html, while changing the URL you're on will swap out the main content of the page, without leaving the page (hence, the player gets to continue playing).

There are other solutions; you don't even need a framework/router, but the amount of DiY pain that Angular swallows for you in this case is pretty large, if you don't adore doing nitty-gritty JS+DOM+BOM+AJAX stuff.

EDIT

Given that you're new to JS, I figured I'd pop something in here to help:

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

Then, once you have that page written, saved and loaded in your browser, open your DevTools, and go to the console tab.

Quick JS Primer, with none of the basics:

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

Note, I could have named song anything I wanted to... var audio = ... , var player = ... , var media = ... .

Just work with what makes sense.

Another thing you can do is create your own functions that you can run:

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);
}

Again, after you've defined things like this, you can call them similar to how you called .play( ) and .pause( ) before.

playSong( song );

pauseSong( song );

stopSong( song );

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

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

That's the link to the API for media elements.

MDN also has a decent primer on learning JS in general.

Making a persistent non js html5 player

Question

1 answers

solution1
0 ACCPTED 2015-05-28 02:06:51

EDIT

Making a persistent non js html5 player

Question

1 answers

solution1 0 ACCPTED 2015-05-28 02:06:51

EDIT

solution1
0 ACCPTED 2015-05-28 02:06:51