Mettere nella home musica sottofondo
- Creatore Discussione Shyson
- Data di inizio
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.
in alternativa prova ad implementare nello script js che ti ho postato prima anche il formato ogg.
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:
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:
Si, funziona su tutti ora, con IE non so, però quando arriva alla fine non riparte
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?
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.
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">
...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.
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:
Ok, funziona, vedo che il suono non si alza di più di quello impostato sul pc
Discussioni simili
