В настоящее время я занимаюсь разработкой сайта для своей музыки. Это здорово и все, но я хотел спросить (я немного поиграл в Google). Можно ли создать постоянный игрок без javascript html5 в качестве iframe в верхней части страницы, и разве это не испортить закладки? Кроме того, мне бы очень хотелось, чтобы элементы на странице могли взаимодействовать с игроком внутри iframe. Благодаря!Создание постоянного игрока js html5
Как указано в @KJPrice, здесь вы действительно не можете много сделать, что не связано с JS в некотором роде.
Если вы хотите опыт по умолчанию
<header>
<nav ><!-- ... --></nav>
<audio src="..." controls></audio>
</header>
... с очень ограниченным стилем доступных ему, что доступно для вас.
Если вы хотите создать что-то отдельно, для этого потребуется отдельный HTML/JS.
Кроме того, если вы хотите играть в альбом (т. Е. Воспроизводить кучу mp3-файлов по порядку, так как каждый заканчивается), для этого потребуется больше JS.
Но ваша альтернатива не реально изменить что ... Если вы полагаетесь на равнине <audio controls> тега, внутри из iframe, то вы оба получаете браузер по умолчанию выглядит и вам нужны JS говорить между iframes, и вам нужно JS в iframe, чтобы изменить песни/управлять плейлистом для проигрывателя, что составляет 2x головной боли для той же функциональности.
Другой проблемой является перенос навигации в iframe. Теперь вам нужно либо использовать JS для разговора по границе iframe, чтобы сообщить родителям изменить страницу (плохо), либо полагаться на целевые атрибуты тегов ссылок (также плохо).
еще хуже, если вы сделать получить все эту работу, когда родительское окно изменяет страницу, она будет разгружать iframe тоже.
Вы можете, конечно, решить это, добавив несколько iframes, а затем использовать родительскую страницу для управления URL-адресами и общением между всеми дочерними элементами, но это двойная идея с нечеткой идеей по многим причинам.
Вместо большей части этой головной боли, если вы хотите сохранить возможность закладок, а также поддерживать постоянный плеер, который никогда не останавливается, я бы предложил посмотреть на что-то вроде Angular и angular-router.
Есть кривая обучения, но если остальные ваши страницы являются только статическими .html-файлами, тогда у вас должен быть довольно прямой путь для запуска навигатора и игрока в index.html при изменении URL-адреса, на котором вы находитесь будет заменять основное содержимое страницы, не покидая страницу (следовательно, игрок будет продолжать играть).
Существуют и другие решения; вам даже не нужна фреймворк/роутер, но количество боли в DiY, которое угловой глотает для вас в этом случае, довольно велико, если вы не обожаете делать nitty-gritty 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 и перейдите на вкладку консоли.
Quick JS Primer, ни с одной из основ:
// 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 в целом.
Ну, пора научиться JavaScript. Трудно учиться, потому что я слышал, что это довольно легко, как только вы это почувствуете. Я полностью изучил HTML в течение 9 месяцев. –
Усвоить его и понять все его нюансы в каждом браузере (в основном, старый IE, старый Safari и старый Android) могут потребоваться годы ... но вы на самом деле не хотите стать ремесленником в настоящий момент, поэтому чтобы решить некоторые проблемы. Большинство JS, которые вам нужны для проигрывателя, для одной песни, довольно простые. Начни там, я полагаю. Вы узнаете больше, когда идете. – Norguard
Хорошо, спасибо. Ваша помощь была потрясающей. :) –
Во-первых, проверьте элемент 'audio'. Нет необходимости в javascript. Ваш последний вопрос потребует немного разъяснений. Что значит «если бы элементы на странице могли взаимодействовать с игроком внутри iframe»? Являются ли элементы внутри 'iframe'? Или они находятся в родительском окне? Если они находятся в родительском окне, то является iframe в том же домене, что и родительское окно? –
Я еще не получил домен, делая все это локально. Но чтобы ответить на ваш вопрос, ни один элемент не находится снаружи. Моя идея состоит в том, чтобы iframe содержал навигацию и плеер, а затем под ним находился контент страницы. Так скажите, что содержание страницы было похоже на кнопку, чтобы воспроизвести альбом, можно ли тогда сказать игроку iframe, чтобы он играл на этом альбоме? –
Да, я очень рекомендую покончить с iframe, если он не является абсолютно необходимым (т. Е. Вы не контролируете его). Если это совершенно необходимо, вам, скорее всего, придется использовать что-то вроде 'postMessage'. Вот достойное прохождение этого процесса на [teamtreehouse.com] (http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage) –