Η σελίδα μας αναβαθμίστηκε, γι' αυτό τον λόγο τα μέλη μας θα πρέπει να ζητήσουν νέο κωδικό πρόσβασης από την υπηρεσία "Αποστολή κωδικού πρόσβασης".
Εάν το email με τον νέο κωδικό δεν έρθει στο inbox κοιτάξτε και στο spam folder. Ο server είναι φρέσκος και δεν έχει το reputation που του αξίζει.

Flash Player για radio stream με τον JW player

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: Super-Moderators, WebDev Moderators

Απάντηση
Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6222
Εγγραφή: 30 Νοέμ 2004 03:09

Flash Player για radio stream με τον JW player

Δημοσίευση από fafos » 23 Ιαν 2010 19:49

Flash Player για radio stream με τον JW player:

Στο παρακάτω βοήθημα μπορούμε να φτιάξουμε έναν flash player για να παίζουμε κάποιον(ους) ραδιοφωνικό σταθμό στην ιστοσελίδα μας.

Στο βοήθημα αναπτύσσω την ιδέα για 1 ράδιο αλλά λόγω του ότι χρησιμοποιούμε xml playlist μπορείτε να βάλετε όσους σταθμούς θέλετε.


1. Κατεβάστε τον JW flash player: http://www.longtailvideo.com/players/jw-flv-player/

o player υπάρχει και σε commercial lisence όπου δεν εμφανίζεται το logo (εμφανίζεται για λίγο με την έναρξη του player στην free έκδοση) και επίσης έχετε την δυνατότητα να δημιουργήσετε το δικό σας layout σε ένα αρχείο xml. Ο free δεν έχει αυτές τις δυνατότητες.

αποσυμπιέστε το zip αρχείο... από τα αρχεία που υπάρχουν μέσα θα χρειαστούμε μόνο το swfobject.js και το player.swf (ή player-viral.swf ανάλογα με το τι κατεβάσατε).


2. Πάρτε το stream url του σταθμού (π.χ. http://www.elgr.info/tunein.php/enimerosi/playlist.asx) και ανοίξτε το με το notepad (στο ανοιγμα αρχείου βάζουμε την παραπάνω διεύθυνση)... αυτό θα μας δώσει τα στοιχεία του σταθμού:



Κώδικας: Επιλογή όλων

<asx version = "3.0">
	<Title>&#58;&#58; ENIMERWSI.GR RADIO&#58;&#58;</Title>
	<Author>http&#58;//www.enimerwsi.gr</Author>
	<Copyright> &#58;&#58; ENIMERWSI.GR &#58;&#58;</Copyright>
	<PARAM name="HTMLView" value="http&#58;//www.enimerwsi.gr" />
	<MoreInfo href="http&#58;//www.enimerwsi.gr" />
	<entry>
		<ref href="http&#58;//174.36.237.66&#58;8152" />
		<Title>&#58;&#58; ENIMERWSI.GR RADIO&#58;&#58;</Title> 
		<Author>http&#58;//www.enimerwsi.gr</Author>
	</entry>
</asx>
εμάς μας ενδιαφέρει αυτό:

Κώδικας: Επιλογή όλων

<ref href="http&#58;//174.36.237.66&#58;8152" />
αυτό το link θα το χρησιμοποιήσουμε παρακάτω...


3. δημιουργούμε στο notepad ένα αρχείο xml με τον παρακάτω κώδικα:

Κώδικας: Επιλογή όλων

<?xml version='1.0' encoding='UTF-8'?>
<playlist version="1" xmlns="http&#58;//xspf.org/ns/0/" xmlns&#58;jwplayer="http&#58;//developer.longtailvideo.com/trac/wiki/FlashFormats">

<trackList>
 <track>
<creator>Enimerwsi.gr</creator>
<title>ENIMERWSI.GR RADIO</title>
<jwplayer&#58;description>kapoio allo keimeno edo</jwplayer&#58;description>
<location>http&#58;//174.36.237.66&#58;8152/;*.nsv</location>
<info>http&#58;//enimerwsi.gr/</info>
<jwplayer&#58;type>sound</jwplayer&#58;type>
<jwplayer&#58;image>fafos.png</jwplayer&#58;image>
<jwplayer&#58;duration>28800</jwplayer&#58;duration>
</track>


</trackList>
</playlist>
στο creator γράφουμε τον τίτλο του site
στο title γράφουμε κάποιον τίτλο (π.χ. Το ράδιο αρβύλα)
στο description γράφουμε κάποιες άλλες πληροφορίες (π.χ. κάποιο slogan)
στο location βάζουμε το link που είπαμε παραπάνω (http://174.36.237.66:8152) προσθέτοντας τα: /;*.nsv
το type το αφήνουμε πάντα με value sound
στο image βάζουμε κάποια εικόνα ή λογότυπο αλλά προσέχουμε τις διαστάσεις να μην είναι πολύ μικρή ή πολύ μεγάλη η εικόνα!
το duration χρησιμεύει για να δίνουμε στην playlist τον χρόνο αλλαγής στον επόμενο σταθμό αν έχουμε πολλούς σταθμούς στον ίδιο player.. για έναν σταθμό αφήστε το στα 28800.

Αν θέλετε να προσθέσετε και άλλον σταθμό επαναλάβατε από κάτω το κομμάτι κώδικα:

Κώδικας: Επιλογή όλων

<trackList>
 <track>
<creator>Enimerwsi.gr</creator>
<title>ENIMERWSI.GR RADIO</title>
<jwplayer&#58;description>kapoio allo keimeno edo</jwplayer&#58;description>
<location>http&#58;//174.36.237.66&#58;8152/;*.nsv</location>
<info>http&#58;//enimerwsi.gr/</info>
<jwplayer&#58;type>sound</jwplayer&#58;type>
<jwplayer&#58;image>fafos.png</jwplayer&#58;image>
<jwplayer&#58;duration>28800</jwplayer&#58;duration>
</track>


</trackList>
αλλάζοντας βέβαια τα δεδομένα για τον νέο σταθμό..


4. Στην σελίδα που θέλουμε να εμφανίσουμε τον player για αρχή καλούμε το swfobject:
<script language="javascript" type="text/javascript" src="swfobject.js"></script>
από κάτω βάζουμε ένα javascript που μας βοηθά περισσότερο όταν έχουμε πάνω από 1 σταθμό τον player.. εσείς βάλτε τον κώδικα ακόμα και για 1 σταθμό.. στο ιδιο javascript βάζουμε και τον κώδικα για τον player:

Κώδικας: Επιλογή όλων

<script language="javascript" type="text/javascript">
    var player        =  null;
      var playlist      =  null;
      var currentTime   =     0;
      var previousTime  =    -1;


      function playerReady&#40;obj&#41;
      &#123;
        player = gid&#40;obj.id&#41;;
        addListeners&#40;&#41;;
      &#125;;


      function addListeners&#40;&#41;
      &#123;
        playlist = player.getPlaylist&#40;&#41;;

        if&#40;playlist.length > 0&#41;
        &#123;
          player.addModelListener&#40;'TIME', 'timeMonitor'&#41;;
          checkTime&#40;&#41;;
        &#125;
        else
        &#123;
          setTimeout&#40;"addListeners&#40;&#41;;", 50&#41;;
        &#125;
      &#125;;


      function timeMonitor&#40;obj&#41;      &#123;
        currentTime = obj.position

        if&#40;currentTime < previousTime&#41;        &#123;
          previousTime = -1;
        &#125;
      &#125;;


      function checkTime&#40;&#41;
      &#123;
        if&#40;previousTime < currentTime&#41;
        &#123;
          previousTime = currentTime;
        &#125;
        else
        &#123;
          player.sendEvent&#40;'NEXT'&#41;;
          $&#40;".bottom"&#41;.effect&#40;"highlight", &#123;"color"&#58;"blue"&#125;, 2000&#41;;
        &#125;

        setTimeout&#40;"checkTime&#40;&#41;;", 15000&#41;;
      &#125;;


      function gid&#40;name&#41;
      &#123;
        return document.getElementById&#40;name&#41;;
      &#125;;
	  
	  
	  
	  
	  
function radio&#40;&#41; &#123;	
		var s1 = new SWFObject&#40;'player-viral.swf','mediaplayer','420','100','9'&#41;;
		s1.addParam&#40;'allowfullscreen','false'&#41;;
		s1.addParam&#40;'allowscriptaccess','always'&#41;;
		s1.addVariable&#40;"backcolor","0x000000"&#41;;
		s1.addVariable&#40;"frontcolor","0xFFFFFF"&#41;;
		s1.addVariable&#40;"lightcolor","0xCCCC00"&#41;;
		s1.addVariable&#40;"volume","60"&#41;;
		s1.addVariable&#40;'file', 'radio.xml'&#41;;
		s1.addVariable&#40;'skin', 'snel.swf'&#41;;
		s1.addVariable&#40;'autoscroll','true'&#41;;
		s1.addVariable&#40;'playlist','top'&#41;;
		s1.addVariable&#40;'playlistsize','360'&#41;;
		s1.addVariable&#40;'repeat','always'&#41;;
		s1.addVariable&#40;'autostart','true'&#41;;
		s1.write&#40;'radio'&#41;;	

		
		 
&#125;;

window.onload = radio
</script>
Για το τι κάνει το κάθε variable μπορείτε να διαβάσετε εδώ: http://developer.longtailvideo.com/trac ... 5FlashVars

οι δυνατότητες του player είναι πολλές και δεν μπορώ να τις αναλύσω εδώ. Αυτά που πρέπει να προσέξετε είναι η διαδρομή προς το swf αρχείο (player-viral.swf) και οι διαστάσεις που δίνει ('420','100')

αν διαβάσετε καλά τα variables μπορείτε να αλλάξετε την εμφάνιση του player. Η εταιρεία τους έχει και κάποια skins τα οποία αυτή την στιγμή τα πουλά (παλιά τα είχε free). Εγώ στο demο μου χρησιμοποιώ ένα από αυτά τα skins το οποίο είναι με commercial license και αν το κατεβάσετε η ευθύνη είναι δική σας !


Ο player θα εμφανιστεί όπου βάλετε αυτό το div:

Κώδικας: Επιλογή όλων

<div id="radio"  ></div> 

Δείτε ένα demo εδώ (1 σταθμό)

και εδώ:
Δείτε ένα demo εδώ (2 σταθμοί)

Επισυνάπτω τα αρχεία που χρησιμοποιώ για το demo με ένα ράδιο (χωρίς το skin)

Ο player μπορεί να γίνει πιο δυναμικός χρησιμοποιώντας λίγη php και ajax για να δείχνει πιο τραγούδι παίζει ο σταθμός μέσα στον player.. αυτό δυστυχώς χρειάζεται να έχω πρόσβαση σε κάποιον λογαριασμό shoutcast κάτι το οποίο δεν έχω..
Συνημμένα
radio.zip
(122.62 KiB) Μεταφορτώθηκε 1723 φορές
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

billiaswhs
Δημοσιεύσεις: 346
Εγγραφή: 11 Νοέμ 2004 00:29
Επικοινωνία:

Flash Player για radio stream με τον JW player

Δημοσίευση από billiaswhs » 09 Σεπ 2010 17:27

Γεια χαρά πολύ καλό το tutorial, βασικά έχω βάλει στη ροή ένα σταθμό
αλλά δεν θέλω να ξεκινάει με το που κάνει load η σελίδα οπότε
έβαλα το autostart false

s1.addVariable('autostart','false');

άλλα πάλι ξεκινάει μήπως παίζει τίποτα από το javascript και δεν παίρνει τη τιμή?

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6222
Εγγραφή: 30 Νοέμ 2004 03:09

Flash Player για radio stream με τον JW player

Δημοσίευση από fafos » 09 Σεπ 2010 17:47

emena douleuei kanonika se olous tous browsers.. katharise thn cache...
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

billiaswhs
Δημοσιεύσεις: 346
Εγγραφή: 11 Νοέμ 2004 00:29
Επικοινωνία:

Flash Player για radio stream με τον JW player

Δημοσίευση από billiaswhs » 10 Σεπ 2010 01:06

Την καθάρισα τώρα, άλλα τελικά είδα οτί δεν έχει προβλημα με
firefox, και τον ΙΕ8 δεν κάνει ο autostart

αλλά με τον Ι7 πρέπει να έχει κανένα μικροπροβληματάκι ο ίδιος
jwplayer συνεχίζει να μπαίνει το autostart.

deejayfm
Δημοσιεύσεις: 1
Εγγραφή: 12 Σεπ 2010 13:00

Flash Player για radio stream με τον JW player

Δημοσίευση από deejayfm » 12 Σεπ 2010 13:16

ΠΑΙΔΙΑ ΜΠΟΡΕΙΤΕ ΝΑ ΜΟΥ modarete ΤΟ PLAYER ΓIA NA TO ΒΑΛΩ ΣΕ ΕΝΑ SITE ΓΤ ΔΕΝ ΞΕΡΩ? εδω ειναι το streaming ( <asx version="3.0">
<title>deejay fm 107,3 Your dancefloor radio Web:www.deejay-fm.com</title>
<entry>
<title>deejay fm 107,3 Your dancefloor radio Web:www.deejay-fm.com</title>
<author>
deejay fm 107,3 Your dancefloor radio Web:www.deejay-fm.com</author>
<ref href="http://s8.myradiostream.com:10070"/>
</entry>
</ASX>
</ASX> )
ΑΝ ΜΠΟΡΕΙΤΕ ΦΙΑΞΤΕΤΟ ΚΑΙ ΣΤΗΛΤΕ ΜΟΥ ΤΟ HTML ΕΔΩ :'( ΣΑΣ ΠΑΡΑΚΑΛΩΩΩΩΩΩΩΩ

webmonster
Δημοσιεύσεις: 8
Εγγραφή: 06 Οκτ 2010 18:28

Flash Player για radio stream με τον JW player

Δημοσίευση από webmonster » 01 Νοέμ 2010 05:23


PhaNToM
Δημοσιεύσεις: 1
Εγγραφή: 06 Αύγ 2012 11:36
Τοποθεσία: Ελλάδα

Flash Player για radio stream με τον JW player

Δημοσίευση από PhaNToM » 06 Αύγ 2012 12:53

Με listen2myradio δοκίμασε κανείς?

Άβαταρ μέλους
dj_kostas_pro
Δημοσιεύσεις: 210
Εγγραφή: 10 Οκτ 2007 16:54
Τοποθεσία: Πιερία

Flash Player για radio stream με τον JW player

Δημοσίευση από dj_kostas_pro » 18 Αύγ 2012 08:17

PhaNToM το listen2myradio τα τελευταία χρόνια έχει κάνει το streaming με κάποιον τρόπο να μπορεί κάποιος να το ακούσει μόνο από την σελίδα listen2myradio αλλιώς αν το περάσεις στο site σου μετά από κάποια λεπτά σταματάει

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης