Bonjour,
Je suis à la recherche de comment jouer un son à chaque fois que la données de ma requête change.
Demain, je vais avec un ami qui vas présenter ses bières sur une foire artisanale et je souhaiterais lui mettre sur un grand écran un compteur de like de sa page facebook en live.
Sur ce point cela fonctionne.
Ce que je souhaiterai maintenant, c'est que à chaque fois que quelqu'un aime la page, que cela joue un fichier mp3 que j'aurais créé.
Voici le code que j'utilise :
<!DOCTYPE html> <html lang="pl"> <head> <!------------- BASIC --------------> <meta charset="UTF-8"> <title>Facebook Likes Counter</title> <meta name="description" content=""> <meta name="author" content="Bartłomiej Walasik"> <!------------- MOBILE --------------> <meta name="viewport" content="width=device-width, initial-scale=1"> <!------------- FONT --------------> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i&subset=latin-ext" rel="stylesheet" <!------------- BOOSTRAP --------------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <!------------- JQUERY --------------> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style type="text/css" media="screen"> /** CSS Reset provided by Yahoo!
/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } caption,th { text-align:left; } q:before,q:after { content:''; } abbr,acronym { border:0; } /** Main **/ body { color: #FFF; background: #3B5998; font-family: "Helvetica Neue", Helvetica, Arial, Verdana, Sans-Serif; font-size: small; } #main { margin: 0 auto; width: 940px; } /** Counter **/ #counter-layout { display: block; margin: 120px auto 0 auto; min-height: 300px; text-align: center; } #counter-container { padding: 140px 0 50px 0; } .fb-c-num { padding: 0 30px; text-align: center; font-size: 300px; } </style></head><body><center> <span class="fb-c-num"> </span></center> <script> // Change these token to your token, // pageId is your page(use fb id from web) var token = 'XXXXXXXXXXXXXX'; var pageId = 'XXXXXXX'; // Function will get the fb likes $(document).ready(() => { fbCount(); setInterval(fbCount, 36000000); });var fbCount = () => { $.ajax({ url : `https://graph.facebook.com/${pageId}/?fields=fan_count&access_token=%24%7Btoken%7D%60%2C dataType: 'json', success: (data, status) => { $(".fb-c-num").text(data.fan_count); }, error: (data) => { $('.fb-c-num').html("This page doesn't exist or your data are wrong :P"); } }); } </script></body></html>
Juste le code du script, je ne sais pas pourquoi ça s'affiche aussi mal désolé :
<script> // Change these token to your token, // pageId is your page(use fb id from web) var token = 'XXXXXXXXXXXXXX'; var pageId = 'XXXXXXX'; // Function will get the fb likes $(document).ready(() => { fbCount(); setInterval(fbCount, 36000000); }); var fbCount = () => { $.ajax({ url: `https://graph.facebook.com/${pageId}/?fields=fan_count&access_token=%24%7Btoken%7D%60%2C dataType: 'json', success: (data, status) => { $(".fb-c-num").text(data.fan_count); }, error: (data) => { $('.fb-c-num').html("This page doesn't exist or your data are wrong :P"); } }); } </script>
Je peux le mettre sur un serveur distant ou sur un serveur local avec raspberry si il le faut.
J'avais trouvé une explication que je trouvais superbe, mais cela ne fonctionne plus étant donné que ça à été fait en 2014.
https://makezine.com/projects/build-a-raspberry-pi-like-tracker-kiosk/
Je suis preneur pour toutes les idées que vous auriez ou solutions.
Encore merci.
Afficher la suite