Mettere nella home musica sottofondo

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Non so se è la sezione corretta, ho estratto da un video un la musica di sottofondo e ora voglio mettere questo file che si apre automaticamente con la home in tutti i browser e macchine. Il file è .mpeg-4 o m4a che è lo stesso.
 

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ciao, prova a fare cosi':
PHP:
<script type="text/javascript">
var audio = document.createElement("audio");
if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg")){
    audio.src = "tuo_suono.mp3";
    audio.play();
}
</script>
 

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Ciao, prova a fare cosi':
PHP:
<script type="text/javascript">
var audio = document.createElement("audio");
if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg")){
    audio.src = "tuo_suono.mp3";
    audio.play();
}
</script>
Funziona con Safari e Chrome, con FF e Opera non va
 

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ciao, in tal caso ti consiglio il tag audio di HTML5.
Ti ho preparato un esempio.
Di conseguenza se decidessi di adottare tale metodo questa discussione andrebbe spostata in HTML5.
Come ben saprai alcuni browser come Firefox non supportano gli mp3
pertanto dovrai convertire il suono in ogg.
Ecco un tool gratuito online per convertire il suono: http://media.io/
ti basterà caricare il file e salvarlo in formato ogg è il gioco è fatto.
Nell'esempio ovviamente non ho previsto la visione del player.
L'ho testato con Firefox, Safari, Chrome e funziona.

PHP:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tag Audio HTML5</title>
</head>
<body>
 
 <audio  autoplay="true">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  <p>Il tuo Browser non supporta il tag audio.</p>
 </audio> 

</body>
</html>

in alternativa prova ad implementare nello script js che ti ho postato prima anche il formato ogg.
 
Ultima modifica:

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Ciao, in tal caso ti consiglio il tag audio di HTML5.
Ti ho preparato un esempio.
Di conseguenza se decidessi di adottare tale metodo questa discussione andrebbe spostata in HTML5.
Come ben saprai alcuni browser come Firefox non supportano gli mp3
pertanto dovrai convertire il suono in ogg.
Ecco un tool gratuito online per convertire il suono: http://media.io/
ti basterà caricare il file e salvarlo in formato ogg è il gioco è fatto.
Nell'esempio ovviamente non ho previsto la visione del player.
L'ho testato con Firefox, Safari, Chrome e funziona.

PHP:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tag Audio HTML5</title>
</head>
<body>
 
 <audio  autoplay="true">
  <source src="audio.ogg" type="audio/ogg">
  <source src="audio.mp3" type="audio/mpeg">
  <p>Il tuo Browser non supporta il tag audio.</p>
 </audio> 

</body>
</html>

in alternativa prova ad implementare nello script js che ti ho postato prima anche il formato ogg.
Il mio sito è html5 e utf-8, adesso va con safari e FF ma non con chrome e opera, però devo tenere e file, mp3 e ogg

EDIT: ORA va anche crome e opera
 
Ultima modifica:

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ciao, con chrome l'ho testato e funziona.
Si devi sempre tenere entrambi i formati mp3 e ogg per tutti i browser.
 

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ciao, sostituisci cosi':
PHP:
 <audio autoplay loop>
  <source src="audio.ogg" type="audio/ogg" >
  <source src="audio.mp3" type="audio/mpeg">
  Il tuo browser non supporta il tag audio.
 </audio>
 

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Ciao, sostituisci cosi':
PHP:
 <audio autoplay loop>
  <source src="audio.ogg" type="audio/ogg" >
  <source src="audio.mp3" type="audio/mpeg">
  Il tuo browser non supporta il tag audio.
 </audio>
Ok, ancora 2 cose: sto cercando di metterlo in un file esterno ma non funziona con la solita procedura

function sottofondo() {
<audio autoplay loop>
<source src="audio.ogg" type="audio/ogg" >
<source src="audio.mp3" type="audio/mpeg">
Il tuo browser non supporta il tag audio.
</audio>
}

Poi, è possibile mettere altri file in modo che finito uno inizia l'altro e continua così a ripetizione?
 

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ciao, in tal caso meglio creare tutto dinamicamente con javascript.
Ti ho preparato un esempio.
L'ho testato con Safari, chrome, firefox e funziona.
Ho creato array statici per i suoni ma ovviamente si può
richiamare un xml avente la lista dei brani.
Lo script si può arricchire con dei: controller personalizzati
implementando le relative funzioni play e pause, controlli per il volume etc. etc.


PHP:
<script>

 var lista_ogg = new Array();
 lista_ogg [0]="suoni/audio.ogg";
 lista_ogg [1]="suoni/s1.ogg";
 lista_ogg [2]="suoni/audio.ogg";
 lista_ogg [3]="suoni/s1.ogg";

 var lista_mp3 = new Array();
 lista_mp3 [0]="suoni/audio.mp3";
 lista_mp3 [1]="suoni/s1.mp3";
 lista_mp3 [2]="suoni/audio.mp3";
 lista_mp3 [3]="suoni/s1.mp3";
 
 var n=0;
 var fine_lista=lista_ogg.length;
 var audio = document.createElement("audio");
 
 inizio();
 function inizio(){
    audio.addEventListener("canplaythrough", function () {
     //alert('il file sono stati caricato!');
   }, false);

  if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg")){
      audio.src = lista_mp3[n];
      audio.play();
	  audio.addEventListener('ended', function () {
      n++;
	  itera_brani();
      }, false);
  } else if(audio != null && audio.canPlayType && audio.canPlayType("audio/ogg")){
	  audio.src = lista_ogg[n];
      audio.play();
	  audio.addEventListener('ended', function () {
      n++;
	  itera_brani();
      }, false);
	 }
  
 }
 
  function itera_brani(){
      
	  var audio = document.createElement("audio");
   if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg")){
       audio.src = lista_mp3[n];
	   audio.play();
	   audio.addEventListener('ended', function () {
       n++;
	   itera_brani();
      }, false);
	 
	  if(n==fine_lista){
		loop();
	  }
     } else if(audio != null && audio.canPlayType && audio.canPlayType("audio/ogg")){
	   audio.src = lista_ogg[n];
       audio.play();
	   audio.addEventListener('ended', function () {
       n++;
	    itera_brani();
      }, false);
	
     if(n==fine_lista){
		loop();
	   }
	  }
	}
  
  function loop(){
	  n=0;
	  itera_brani();
   }

</script>
 

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Ciao, in tal caso meglio creare tutto dinamicamente con javascript.
Ti ho preparato un esempio.
L'ho testato con Safari, chrome, firefox e funziona.
Ho creato array statici per i suoni ma ovviamente si può
richiamare un xml avente la lista dei brani.
Lo script si può arricchire con dei: controller personalizzati
implementando le relative funzioni play e pause, controlli per il volume etc. etc.


PHP:
<script>

 var lista_ogg = new Array();
 lista_ogg [0]="suoni/audio.ogg";
 lista_ogg [1]="suoni/s1.ogg";
 lista_ogg [2]="suoni/audio.ogg";
 lista_ogg [3]="suoni/s1.ogg";

 var lista_mp3 = new Array();
 lista_mp3 [0]="suoni/audio.mp3";
 lista_mp3 [1]="suoni/s1.mp3";
 lista_mp3 [2]="suoni/audio.mp3";
 lista_mp3 [3]="suoni/s1.mp3";
 
 var n=0;
 var fine_lista=lista_ogg.length;
 var audio = document.createElement("audio");
 
 inizio();
 function inizio(){
    audio.addEventListener("canplaythrough", function () {
     //alert('il file sono stati caricato!');
   }, false);

  if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg")){
      audio.src = lista_mp3[n];
      audio.play();
	  audio.addEventListener('ended', function () {
      n++;
	  itera_brani();
      }, false);
  } else if(audio != null && audio.canPlayType && audio.canPlayType("audio/ogg")){
	  audio.src = lista_ogg[n];
      audio.play();
	  audio.addEventListener('ended', function () {
      n++;
	  itera_brani();
      }, false);
	 }
  
 }
 
  function itera_brani(){
      
	  var audio = document.createElement("audio");
   if (audio != null && audio.canPlayType && audio.canPlayType("audio/mpeg")){
       audio.src = lista_mp3[n];
	   audio.play();
	   audio.addEventListener('ended', function () {
       n++;
	   itera_brani();
      }, false);
	 
	  if(n==fine_lista){
		loop();
	  }
     } else if(audio != null && audio.canPlayType && audio.canPlayType("audio/ogg")){
	   audio.src = lista_ogg[n];
       audio.play();
	   audio.addEventListener('ended', function () {
       n++;
	    itera_brani();
      }, false);
	
     if(n==fine_lista){
		loop();
	   }
	  }
	}
  
  function loop(){
	  n=0;
	  itera_brani();
   }

</script>

Sto ancora cercando di far funzionare questo, se clicco su Stop non si ferma

PHP:
<head>
<audio id="sottofondo" autoplay loop>
   <source src="suono.ogg" type="audio/ogg">  
  <source src="suono.mp3" type="audio/mpeg">  
  <p>Il tuo browser non supporta il tag audio</p>
</audio>   
<script language="javascript">  
function play() { 
document.getElementById("sottofondo").play();
}  
function stop() { 
document.getElementById("sottofondo").stop();  
} 
</script>   
</head>

<body>
<input type="button" value="play" onclick="javascript: play()" style="cursor:pointer">
<input type="button" value="stop" onclick="javascript: stop()" style="cursor:pointer">

...
 

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Per quello che volevi fare tu lo script che ti ho postato prima funziona perfettamente.
Ci hai ripensato e vuoi inserire i controlli?
non lo volevi automatico?
 

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ecco qua HTML5 tag audio.
Ho aggiunto anche il controllo volume:
Sostituisci i brani e il gioco è fatto!
Come vedi la directory è suoni puoi cambiarla.
PHP:
<audio id="audio" autoplay preload="auto">
  <source src="suoni/adele.ogg" type="audio/ogg" >
  <source src="suoni/adele.mp3" type="audio/mpeg">
</audio>
<div>
  <button onclick="document.getElementById('audio').play()">Play </button>
  <button onclick="document.getElementById('audio').pause()">Pause </button>
  <button onclick="document.getElementById('audio').volume+=0.1">+</button>
  <button onclick="document.getElementById('audio').volume-=0.1">-</button>
</div>
 
Ultima modifica:

Shyson

Utente Attivo
19 Ago 2012
1.179
1
38
Ecco qua HTML5 tag audio.
Ho aggiunto anche il controllo volume:
Sostituisci i brani e il gioco è fatto!
Come vedi la directory è suoni puoi cambiarla.
PHP:
<audio id="audio" autoplay preload="auto">
  <source src="suoni/adele.ogg" type="audio/ogg" >
  <source src="suoni/adele.mp3" type="audio/mpeg">
</audio>
<div>
  <button onclick="document.getElementById('audio').play()">Play </button>
  <button onclick="document.getElementById('audio').pause()">Pause </button>
  <button onclick="document.getElementById('audio').volume+=0.1">+</button>
  <button onclick="document.getElementById('audio').volume-=0.1">-</button>
</div>
Ok, funziona, vedo che il suono non si alza di più di quello impostato sul pc
 
Discussioni simili
Autore Titolo Forum Risposte Data
F Non Riesco A Mettere Una Scritta/logo A Destra Nella Mia Homepage!!!!!:-( HTML e CSS 1
K Mettere insieme due funzioni Javascript 2
Shyson Mettere categorie nelle anteprime degli articoli PHP 1
R Mettere in sicurezza una comunicazione .NET Framework 0
G Mettere il footer in basso HTML e CSS 0
G mettere account posta in Microsoft outlook 2016 di gmail Posta Elettronica 0
B Mettere sito offline senza troppe penalizzazioni SEO e Posizionamento 0
G [HTML] mettere link in facebook link invece che su sito web Social Media Marketing 1
G [Guida MyBB 1.8] Mettere in colonna SubForum CMS (Content Management System) 0
G [Photoshop] Mettere una scritta in prospettiva. Photoshop 7
Shyson [PHP] Mettere parentesi graffe o no? PHP 2
Shyson [PHP] Mettere placeholder PHP 2
Shyson [HTML] Mettere select responsive HTML e CSS 3
giannit [HTML] Mettere div al posto di iframe e possibile? HTML e CSS 9
D cambio il dominio per mettere keyword dentro? SEO e Posizionamento 8
G [HTML] mettere menu style smartphone anche sui tablet HTML e CSS 0
Shyson [PHP] Mettere il link "Leggi tutto" PHP 0
L mettere un simbolo per capire se è un sottomenu jQuery 2
Shyson [WordPress] Mettere un limite a lunghezza caratteri WordPress 11
Shyson [WordPress] Mettere classe css WordPress 0
Shyson Mettere span davanti a php PHP 9
F [VENDO] Inviti a mettere mi piace alla vostra pagina facebook! Annunci servizi di Social Media Marketing 10
Shyson Mettere contaviste ai miei articoli PHP 1
A Come mettere il target _blank in un parser xml in php? PHP 1
A Come mettere al sicuro un Cloud Server? Cloud Computing e Cloud Server 1
Shyson Mettere spazio a codice PHP 3
A Miglior hosting per mettere su internet un sito HTML? Hosting 3
A posso mettere i miei contenuti di un sito usa in un sito in australia SEO e Posizionamento 2
P mettere al centro i bottoni HTML e CSS 10
V Quando mettere il JOIN e quando no? MySQL 1
I Vendo 32.000 Inviti a mettere mi piace alle pagine/Invito Eventi Annunci servizi di Social Media Marketing 0
R Mettere la possibilità di Salvare in un gioco =) Come si fa? Java 2
C è illegale mettere sul proprio portfolio online i siti fatti sotto contratto? Discussioni Varie 5
max_400 Hosting gratuito dove mettere giochi in flash Hosting 2
M Mettere un'immagine come header HTML e CSS 1
Shyson Mettere più valori in una variabile PHP 1
Shyson Mettere css jQuery 1
E Mettere come Selected l'opzione di un select option, tramite il dato di una query. Javascript 2
A consiglio su come mettere in evidenza un contenuto Webdesign e Grafica 0
Shyson Mettere target="_top" PHP 0
Mauro Guardiani chi sa dove mettere questo codice Tubular jQuery plugin Javascript 1
Shyson Mettere "I più visti" nel sito Snippet PHP 0
Shyson Mettere script nel Database PHP 0
Shyson Mettere nel sito "I più visti" PHP 9
S Come mettere Menu a tendina in un modello CSS? HTML e CSS 0
F mettere online foto di persone, si può? Leggi, Normative e Fisco 2
Shyson Mettere alt e title in immagine nel css HTML e CSS 2
Shyson Mettere hover a css in linea HTML e CSS 1
Shyson Mettere immagine per chiudere popup HTML e CSS 1
P Mettere in una riga i record di una colonna MySQL 0

Discussioni simili