Τελικά είμαι τεμπέλης, αλλά ώρες-ώρες με πιάνει κρίση ευσυνειδησίας.
Ας δείξω ένα παράδειγμα με Firefox και τον σταθμό Εν Λευκώ.
Ανοίγεις την σελίδα του σταθμού (απευθείας, όχι μέσω ιστοσελίδας με links για players σταθμών, όπως αυτή που έγραψες). Αν γκουγκλάρεις τον Εν Λευκώ θα δεις ότι η αρχική του σελίδα είναι η :
https://www.enlefko.fm/Πατάς στο σχετικό κουμπί για να αρχίσει η αναπαραγωγή και διαπιστώνεις ότι ανοίγει ένα νέο παράθυρο με τον player του σταθμού (εν προκειμένω η url του player είναι η
https://www.enlefko.fm/player/).
Πάνω σε αυτό το παράθυρο του Firefox με τον player κάνεις δεξί κλικ και επιλέγεις "Προβολή πηγαίου κώδικα"
Θα σου ανοίξει μία νέα καρτέλα με το εξής περιεχόμενο :
- Κώδικας: Επιλογή όλων
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>En Lefko 87.7 Player - En Lefko 87.7</title>
<link rel="icon" href="https://mmo.aiircdn.com/342/5e62318b7f017.png" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://c.aiircdn.com/mediaelement/2.23.3/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="https://c.aiircdn.com/mediaelement/2.23.3/mediaelementplayer.min.css" />
<script>var flashMode = "";</script>
<link type="text/css" href="https://c.aiircdn.com/liveplayer/2019-06-11.css" rel="stylesheet" media="screen" />
<!--<script type="text/javascript" src="http://j.gmstatic.net/mediaplayer-2016-05-05.js"></script>-->
<script>
/** Create variables */
var needStreamChange,
streamURL,
playerMode;
if (flashMode == "1") {
playerMode = ('auto_plugin');
} else {
playerMode = ('auto');
}
/** Start the live media player - either triggered by end of preroll or just on the page on load. */
function loadStream(){
$('audio').mediaelementplayer({
features: ['playpause','volume'],
pluginPath: 'https://c.aiircdn.com/mediaelement/2.23.3/',
mode: playerMode,
flashName: 'flashmediaelement-cdn.swf',
flashScriptAccess: 'always',
success: function(mediaElement, domElement) {
var playerPlugin = mediaElement.pluginType;
mediaElement.load();
mediaElement.play();
/** On pause: clear stream url to stop audio - HTML5 has no 'stop' command */
mediaElement.addEventListener("pause", function(e) {
$(".loadingText").hide();
if (playerPlugin === "native") {
mediaElement.setSrc('');
mediaElement.stop();
mediaElement.setSrc(streamURL);
} else {
mediaElement.stop();
}
});
/** Clear loading text when audio has definitely started playing */
mediaElement.addEventListener("timeupdate", function(e) {
var currentTime = mediaElement.currentTime;
if (currentTime > 0) {
$(".loadingText").fadeOut(300);
}
}, false);
mediaElement.addEventListener("play", function(e) {
$('.playPrompt').fadeOut(600);
$(".loadingText").fadeIn(300);
});
}
});
}
/** Hide container and init the stream - called at end of preroll or on skip button */
function endPreroll() {
$("#prerollCont").hide();
loadStream();
}
/** Video Preroll - calls endPreroll when finished. URL defined within page. Controls hidden, overlay play shown on HTML5. */
function videoPreroll() {
$('#psVideo').mediaelementplayer({
features: [],
mode: playerMode,
pluginPath: 'https://c.aiircdn.com/mediaelement/2.23.3/',
flashName: 'flashmediaelement-cdn.swf',
success: function(mediaElement, domElement) {
mediaElement.load();
mediaElement.play();
mediaElement.addEventListener('ended', function(e) {
endPreroll();
}, false);
}
});
}
/** Audio preroll. URL definited within page. Shows play/pause buttons so you can start it playing on HTML5. */
function audioPreroll() {
$('#psAudio').mediaelementplayer({
features: ['playpause'],
mode: playerMode,
pluginPath: 'https://c.aiircdn.com/mediaelement/2.23.3/',
flashName: 'flashmediaelement-cdn.swf',
success: function(mediaElement, domElement) {
mediaElement.load();
mediaElement.play();
mediaElement.addEventListener('ended', function(e) {
endPreroll();
}, false);
}
});
}
function startHeadline() {
/** Rotate the contact information - if there's more than one item. Clears on hover. */
var listSlideshow = $("#contactList"),
listItems = listSlideshow.children('li'),
listLen = listItems.length,
i = 0,
changeList = function () {
if (listLen > 1) {
listItems.eq(i).fadeOut(500, function () {
i += 1;
if (i === listLen) {
i = 0;
}
listItems.eq(i).fadeIn(500);
});
}
};
listItems.not(':first').hide();
var slideshowInterval = setInterval(changeList, 4000);
$(listSlideshow).hover(function() {
clearInterval(slideshowInterval);
}, function() {
slideshowInterval = setInterval(changeList, 4000);
changeList;
});
}
$(function () {
goLiveData();
/** Skip Button */
$( ".prerollSkip" ).click(function() {
endPreroll();
});
/** Mobile devices get play prompt as they don't autoplay */
var mobileDevice = /(iphone|ipad|ipod|android|windows phone)/i.test(navigator.userAgent);
if (mobileDevice === true) {
$('.playPrompt').css('visibility','visible').hide().fadeIn(400);
}
resizeViewport(800, 560);
});
function resizeViewport(targetWidth, targetHeight) {
var innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
window.resizeBy(targetWidth - innerWidth, targetHeight - innerHeight);
}
function timerLiveData() {
setTimeout("goLiveData()",15000); // EVERY 15 SECS
}
</script>
<!-- ES6 Polyfill -->
<!-- Pollyfill.io returns the polyfills required based on the user-agent -->
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=default%2CArray.prototype.find%2CArray.prototype.findIndex%2CArray.prototype.includes"></script>
<script type="text/javascript" src="https://c.aiircdn.com/fe/js/dist/runtime.5ab8e9ee180a9f261120.js"></script>
<script type="text/javascript" src="https://c.aiircdn.com/fe/js/dist/71ef9696ff795014881c.js"></script>
<script type="text/javascript">
/**
* gm.properties
* Variables used by the front-end JS framework
*/
gm.properties = {
site_id: "630",
page_id: "",
page_path_no_tll: "/player/"
};
</script>
<style type="text/css">
body {
background: #ffffff;
color: #000000;
}
.brandColor,
.dl a,
.cd a,
.audioplayer.mejs-container {
background: #888888;
}
a,
a:hover,
a:active {
color: #1155cc;
}
.logo {
background-image: url(https://mmo.aiircdn.com/342/5e57ccec0d270.png);
}
</style>
<script type="text/javascript">
var siteId = '630';
var djNowId;
var nowTrackId;
function toLocaleTimeStringSupportsLocales() {
try {
new Date().toLocaleTimeString('i');
} catch (e) {
return e.name === 'RangeError';
}
return false;
}
function goLiveData() {
//var nocacheVal = new Date().getTime();
$.ajax({
url: "https://services.aiircdn.com/3580/on-air.js",
cache: false,
dataType: "jsonp",
jsonpCallback: "parseOnAir",
success: function(data){
if (djNowId !== data.now.programme_id) { // programme on air now has changed
var now = data.now;
var img = '';
if (now.images_by_purpose && now.images_by_purpose.on_air) {
img = "<img src=\""+ now.images_by_purpose.on_air +"\" alt=\""+now.name+"\" />";
}
var times = now.times;
if (toLocaleTimeStringSupportsLocales()) {
var startDateTime = new Date(now.start_dt);
var startLocalised = startDateTime.toLocaleTimeString('el', {
timeZone: 'Europe/Athens',
hour: '2-digit',
minute: '2-digit'
});
var endDateTime = new Date(now.end_dt);
var endLocalised = endDateTime.toLocaleTimeString('el', {
timeZone: 'Europe/Athens',
hour: '2-digit',
minute: '2-digit'
});
times = startLocalised + ' - ' + endLocalised;
}
var nowHtml = img +
"<h3><a href=\""+now.url+"\" target=\"_blank\">"+now.name+"</a></h3>" +
"<span>"+times+"</span>" +
"<p class=\"caption\">"+now.description+"</p>" +
"<div class=\"contact\"><ul id=\"contactList\">" +
(now.contact_page_url ? " <li><strong>Email</strong> <a href=\""+now.contact_page_url+"\" target=\"_blank\">Αποστολή μηνύματος</a></li>" : "") +
(now.phone_number ? " <li><strong>Κλήση</strong> "+now.phone_number+"</li>" : "") +
(now.sms ? " <li><strong>SMS</strong> "+now.sms+"</li>" : "") +
"</ul></div>";
$("#djNowCont").html(nowHtml);
djNowId = data.now.programme_id;
startHeadline();
}
}
});
$.ajax({
url: "https://services.aiircdn.com/3580/tracks.js",
cache: false,
dataType: "jsonp",
jsonpCallback: "parsePlayed",
success: function(data){
if (data.tracks && data.tracks[0]) {
var arrLast10 = data.tracks;
var jstHtml = "";
if (nowTrackId !== arrLast10[0].event_id) {
nowTrackId = arrLast10[0].event_id;
for (var i=0; i<5; ++i) {
var track = arrLast10[i];
var trackUrl = "";
if (siteId == 139) {
trackUrl = "/artist" + track.custom_artist_page_path;
} else {
trackUrl = "/artist/" + track.artist_slug + "/";
}
if (i==0) {
var nowHtml = "<img src=\"" + track.image_url + "\" alt=\"\" />" +
"<h3><a href=\""+ trackUrl +"\" target=\"_blank\" class=\"artist\">" + track.artist + "</a></h3>" +
"<em>" + track.title + "</em>";
$(".nowPlay").html(nowHtml);
document.title = track.artist + " on En Lefko 87.7";
} else if (typeof arrLast10[i] != "undefined") {
var trackTime = track.time;
if (toLocaleTimeStringSupportsLocales()) {
var startDateTime = new Date(track.start_dt);
trackTime = startDateTime.toLocaleTimeString('el', {
timeZone: 'Europe/Athens',
hour: '2-digit',
minute: '2-digit'
});
}
jstHtml += "<li><span>" + trackTime + "</span>";
jstHtml += " <strong><a href=\""+trackUrl+"\" target=\"_blank\" class=\"artist\">" + track.artist + "</a></strong><br />" +
" <em>" + track.title + "</em>" +
"</li>";
}
}
$("#jpJustList").html(jstHtml);
}
}
timerLiveData();
}
});
}
</script>
<style>
@media only screen and (max-width: 480px){
.c-ad.c-billboard iframe{
height:auto!important;
}
.inline-ad img{
width:100%;
height:auto;
}
}
.inline-ad{text-align:center;}
</style>
</head>
<body>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-32818903-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-32818903-1');
</script>
<div class="container">
<div class="playerLeft">
<h1 class="logo mBottom">
<a href="/" target="_new">En Lefko 87.7 Player</a>
</h1>
<div class="player mBottom">
<audio id="liveplayer" src="https://stream.radiojar.com/enlefko877" preload="none" class="audioplayer" type="audio/mp3" width="300" height="60" ></audio>
<div class="playPrompt mBottom">Πατήστε το play για να ακούσετε.</div>
<div class="loadingText">Φόρτωση...</div>
</div>
<div class="mpu">
<div class="gm-adpos" data-posid="2" id="adpos-2"></div>
</div>
</div>
<div class="playerRight">
<div class="onAirNow mBottom">
<h2 class="brandColor">On Air</h2>
<div id="djNowCont" class="cf">
</div>
</div>
<div class="recentlyPlayed">
<h2 class="brandColor">Ακούμε τώρα στο <span>En Lefko 87.7</span></h2>
<div class="nowPlay cf">
<img src="https://i.aiircdn.com/pixel.gif" alt="" />
<h3>Παρακαλούμε περιμένετε</h3>
<em>Φόρτωση...</em>
</div>
<div id="justPlayed">
<div id="justPlayedCont">
<ol id="jpJustList">
</ol>
</div>
</div>
</div>
</div>
</div>
<script>
var streamURL = 'https://stream.radiojar.com/enlefko877'
loadStream();
</script>
</body>
</html>
Μόλις ανοίξει η καρτέλα αν έχεις υπομονή ψάχνεις να βρεις το stream ή πατάς ctrl+f και στο πεδίο αναζήτησης που θα ανοίξεις εισάγεις έναν όρο που πιθανολογείς σχετικό, πχ stream.
πατάς enter και μετά δίπλα επιλέγεις επισήμανση όλων.
Στο συγκεκριμένο παράδειγμα θα σου κάνει highlighted 5-6 εγγραφές με τον όρο stream, σε κάποιες από τις οποίες θα βρεις την διεύθυνση που χρειάζεσαι δηλαδή την
https://stream.radiojar.com/enlefko877 (είναι αυτή που παραπάνω έχω επισημάνει με κόκκινη γραμματοσειρά.
Ακόμα λοιπόν και αν δεν βρεις το stream έτοιμο γκουγκλάροντας, με λίγη προσπάθεια θα το βρεις μόνος σου από τον πηγαίο κώδικα της σελίδας.
Edit -> Στην προβολή κώδικα (παραπάνω) δεν με αφήνει να βάλω κόκκινη γραμματοσειρά. Τέλος πάντων, θα το βρεις προς το τέλος, στην ιστοσελίδα όμως, το highlight που περιέγραψα είναι ευκρινές, το εντοπίζεις αμέσως.
Δημοσιεύτηκε: 13 Απρ 2020, 05:27