Comment puis-je faire un <audio> fichier lire en continu sur toutes les pages?

Je me demande comment je fais pour obtenir un fichier audio à jouer "en continu" sur toutes les pages. Donc, si le fichier audio a joué pendant 20 secondes, puis lors de la navigation sur une autre page, il va continuer à partir de là où il l'avait laissé. Moi aussi je suis en essayant d'obtenir le volume à une diminution de naviguer à l'extérieur de ma page d'accueil. Des conseils ou des conseils me serait apprécié! Merci =D

<audio src="songforsite.mp3" loop="true" autoplay="true" controls>
Unsupported in Firefox
</audio>
Vous pourriez peut-être travailler sur votre site web en tant que "single page du site" avec le audio balise embarquée. La commutation entre les "visuels" pages est faite par des appels AJAX et le remplissage de la zone de la page avec le contenu approprié de façon dynamique. De nombreux sites utilisent ce principe aujourd'hui.

OriginalL'auteur Joshua Baker | 2013-03-25

  1. 19

    Oui, c'est possible. essayez ceci:

    <audio preload="auto" src="a.mp3" loop="true" autobuffer>
Unsupported in Firefox
</audio>
<script>
function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++)
{
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x==c_name)
{
return unescape(y);
}
}
}
var song = document.getElementsByTagName('audio')[0];
var played = false;
var tillPlayed = getCookie('timePlayed');
function update()
{
if(!played){
if(tillPlayed){
song.currentTime = tillPlayed;
song.play();
played = true;
}
else {
song.play();
played = true;
}
}
else {
setCookie('timePlayed', song.currentTime);
}
}
setInterval(update,1000);
</script>
    Très intelligents, mais ils sont susceptibles de laisser un espace entre les navigations.
    Je n'ai pas correctement. pouvez-vous nous expliquer ce qui est absent?
    Oh, j'ai oublié. Cet exemple utilise document.cookie. Donc, vous devez exécuter ce par le biais de serveur @joshua baker
    ne fonctionne pas sur ie8 et 9
    Merci et merveilleuse idée, juste une petite remarque; si vous enroulez JS dans le fichier à inclure dans chaque page; vous avez besoin de l'inclure après le <audio> tag, pas avant, sinon vous obtiendrez un objet unidentified erreur. Et vous pouvez diminuer l'écart entre les pages (Mais l'hôte local uniquement) si vous réduisez l'intervalle de 10 ms setInterval(update,10);. Encore sa épuisant à JS Interpreter.

    OriginalL'auteur

  2. 11

    Si vraiment vous accédez à une autre page, puis vous n'obtiendrez pas vraiment la lecture en continu.

    Il y a trois approches:

    • ouvrez votre lecteur audio dans un popup
    • cadres: un cadre principal de votre page à afficher dans, un petit cadre pour que le lecteur audio
    • pas vraiment de naviguer vers d'autres pages, mais tout faire avec AJAX et ce qui n'a pas fait le rechargement de la page, mais seulement en changeant les parties de la structure du document dynamiquement; peut-être l'ajout de lien réel des fonctionnalités, y compris la modification de la barre d'adresse en utilisant le HTML5 Histoire de l'API

    Toutes les approches ont leurs avantages/inconvénients. Popup est peut-être le plus facile à mettre en œuvre, et a le moins d'inconvénients (par rapport à des cadres).

    Je suis aussi essayer d'obtenir le volume à une diminution de naviguer à l'extérieur de ma page d'accueil.

    Puis prendre tout de clics sur votre lien “accueil”/bouton d'appel et l'appel de la volume méthode de la audio élément avec la valeur d'un paramètre variant de 0 à 1 pour régler le volume.

    L'Option 2 n'est pas vraiment une option, car <audio> est un élément HTML5 et les cadres ne sont pas valides en HTML5.
    C'est absurde. w3.org/TR/html5/embedded-content-0.html#the-iframe-element, w3.org/TR/html5/rendering.html#frames-and-framesets
    En effet, je me souviens du temps de lactosérum ils ont été retirés de la spec, et j'ai raté le moment où ils ont été ajoutées. Mon mauvais, upvoted.
    Sur la troisième approche, le RÉFÉRENCEMENT des problèmes se produisent à votre avis?
    bien sûr, si vous ne le faites pas ”le droit chemin”, qui peut causer des problèmes à cet égard. Mais c'est plutôt vaste sujet pour commencer, et n'est pas spécifique de ce particulier, continue-audio-situation de jeu, mais plus à l'AJAX à l'aide de sites en général.

    OriginalL'auteur CBroe

  3. 4

    bien .. propre et soigné moyen de le faire , est de la sorte que soundcloud.com et spoify.com fait par ajaxifing toutes les pages

    fixer une page et de modifier le contenu des pages par le biais de l'ajax ,et de changer l'url pour donner à l'utilisateur l'illusion de la navigation
    ce n'est pas le plus facile ou le plus rapide de la solution ,mais c'est le plus propre ..loin de la peur de navigateurs incompatibilités

    Salut à tous, je sais que c'est un vieux de la réponse, mais je suis en train de le faire sur un de mes sites. Ma préoccupation est, les moteurs de recherche toujours être en mesure d'indexer entièrement ajaxified site comme ça? Je pensais le plus simple de mise en œuvre serait de développer des pages comme normal (pas angulaire ou de réagir etc..), et envelopper la totalité du contenu de la page à l'intérieur d'une page-wrapper div juste après la balise body en HTML. Puis, lorsque le lien est cliqué, supprimer le contenu de la page en cours-wrapper, et de charger la page suivante de la page-wrapper à l'intérieur du corps de la page en cours. Est-ce une bonne idée?
    si vous le faites correctement, oui. Assurez-vous seulement que les pages se chargent très bien quand vous le charger sans AJAX, et l'utilisation réelle des liens remplacé par du Javascript.

    OriginalL'auteur Mohamed Emad Hegab