{"id":238,"date":"2018-01-06T22:33:03","date_gmt":"2018-01-06T21:33:03","guid":{"rendered":"https:\/\/numa-bord.com\/miniblog\/?p=238"},"modified":"2018-01-07T09:42:19","modified_gmt":"2018-01-07T08:42:19","slug":"javascript-mettre-place-lecteur-audio-amplitudejs","status":"publish","type":"post","link":"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/","title":{"rendered":"Javascript : Mettre en place un lecteur audio avec \u00ab\u00a0AmplitudeJS\u00a0\u00bb"},"content":{"rendered":"

Aujourd’hui nous allons d\u00e9couvrir AmplitudeJS<\/a> qui permet de mettre en place sur vos page un lecteur audio flexible et compl\u00e8tement personnalisable. Comme on peux le voir sur leurs exemples<\/a> avec un peu de travail on peux avoir des r\u00e9sultats tr\u00e8s sympas.<\/p>\n

Avant d’en arriver la, je vous propose un exemple bien plus simple. Le r\u00e9sultat est visible ici<\/a> et il suffit de regarder le code source de la page pour comprendre le fonctionnement.<\/p>\n

Le visuel obtenu sera le suivant, mais graphiquement tout est possible, il n’y \u00e0 pas de contraintes \u00e0 ce niveau.<\/p>\n

\"\"<\/a><\/p>\n

Quelques explications suppl\u00e9mentaires ci-dessous.<\/p>\n

Pour commencer on va inclure la \u00ab\u00a0library\u00a0\u00bb \u00ab\u00a0amplitude.js\u00a0\u00bb, ainsi que \u00ab\u00a0bootstrap\u00a0\u00bb, \u00ab\u00a0font-awesome\u00a0\u00bb et un fichier \u00ab\u00a0styles.css\u00a0\u00bb pour la mise en page.<\/p>\n

    <!-- CSS --><\/span>
\n    <link<\/span><\/a> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0-beta.3\/css\/bootstrap.min.css"<\/span> ><\/span>
\n    <link<\/span><\/a> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>"https:\/\/maxcdn.bootstrapcdn.com\/font-awesome\/4.7.0\/css\/font-awesome.min.css"<\/span>><\/span>
\n    <link<\/span><\/a> rel<\/span>=<\/span>"stylesheet"<\/span> href<\/span>=<\/span>".\/css\/style.css"<\/span>><\/span>
\n    <!-- JS --><\/span>
\n    <script<\/span><\/a> src<\/span>=<\/span>".\/js\/amplitude.min.js"<\/span>><\/<\/span>script<\/span><\/a>><\/span><\/div><\/div>\n

Dans le corps de la page mettons en place notre player en utilisant les \u00e9l\u00e9ments \u00ab\u00a0amplitude\u00a0\u00bb, les boutons \u00ab\u00a0bootstrap\u00a0\u00bb et les icones \u00ab\u00a0font-awesome\u00a0\u00bb : <\/p>\n

    <div<\/span><\/a> class<\/span>=<\/span>"glob-player"<\/span>>
\n        <div<\/span><\/a> class<\/span>=<\/span>"glob-btn"<\/span>>
\n            <span<\/span><\/a> class<\/span>=<\/span>"amplitude-prev btn btn-primary"<\/span>><i<\/span><\/a> class<\/span>=<\/span>"fa fa-step-backward"<\/span> aria-hidden=<\/span>"true"<\/span>><\/<\/span>i<\/span><\/a>><\/<\/span>span<\/span><\/a>>
\n            <span<\/span><\/a> class<\/span>=<\/span>"btn amplitude-play-pause btn-primary"<\/span> amplitude-main-play-pause=<\/span>"true"<\/span>><i<\/span><\/a> class<\/span>=<\/span>"fa fa-play"<\/span> aria-hidden=<\/span>"true"<\/span>><\/<\/span>i<\/span><\/a>> <i<\/span><\/a> class<\/span>=<\/span>"fa fa-pause"<\/span> aria-hidden=<\/span>"true"<\/span>><\/<\/span>i<\/span><\/a>><\/<\/span>span<\/span><\/a>>
\n            <span<\/span><\/a> class<\/span>=<\/span>"my-next-btn amplitude-next btn btn-primary"<\/span>><i<\/span><\/a> class<\/span>=<\/span>"fa fa-step-forward"<\/span> aria-hidden=<\/span>"true"<\/span>><\/<\/span>i<\/span><\/a>><\/<\/span>span<\/span><\/a>>
\n        <\/<\/span>div<\/span><\/a>>
\n        <div<\/span><\/a>>
\n            <div<\/span><\/a> class<\/span>=<\/span>"meta-name"<\/span> amplitude-song-info=<\/span>"name"<\/span> amplitude-main-song-info=<\/span>"true"<\/span>><\/<\/span>div<\/span><\/a>>
\n            <progress class<\/span>=<\/span>"amplitude-song-played-progress"<\/span> amplitude-main-song-played-progress=<\/span>"true"<\/span> id<\/span>=<\/span>"song-played-progress"<\/span>><\/<\/span>progress>
\n        <\/<\/span>div<\/span><\/a>>
\n    <\/<\/span>div<\/span><\/a>><\/div><\/div>\n

On ajoute juste quelques ligne pour le style dans notre fichier \u00ab\u00a0styles.css\u00a0\u00bb<\/p>\n

\/* player *\/<\/span>
\n.glob-player<\/span>{<\/span>padding<\/span>:<\/span> 10px<\/span>;<\/span>border-radius<\/span>:<\/span> 5px<\/span>;<\/span>background<\/span>:<\/span> #000<\/span>;<\/span>}<\/span>
\n.glob-player<\/span> .glob-btn<\/span>{<\/span>text-align<\/span>:<\/span> center<\/span>;<\/span>}<\/span>
\n.glob-player<\/span> .meta-name<\/span>{<\/span>color<\/span>:<\/span>#fff<\/span>;<\/span>text-align<\/span>:<\/span> center<\/span>;<\/span>padding<\/span>:<\/span>10px<\/span>;<\/span>}<\/span>
\n\/*progres-bar*\/<\/span>
\n.amplitude-song-played-progress<\/span> {<\/span>
\n    -webkit-appearance:<\/span> none<\/span>;<\/span>-moz-appearance:<\/span> none<\/span>;<\/span>appearance:<\/span> none<\/span>;<\/span>
\n    background-color<\/span>:<\/span> #ccc<\/span>;<\/span>width<\/span>:<\/span> 100%<\/span>;<\/span>height<\/span>:<\/span> 5px<\/span>;<\/span>display<\/span>:<\/span> block<\/span>;<\/span>border<\/span>:<\/span> none<\/span>;<\/span>
\n}<\/span>
\nprogress.amplitude-song-played-progress[<\/span>value<\/span>]<\/span>::<\/span>-webkit-progress-bar {<\/span>
\n    background-color<\/span>:<\/span> #0069d9<\/span>;<\/span>
\n}<\/span>
\nprogress.amplitude-song-played-progress[<\/span>value<\/span>]<\/span>::<\/span>-moz-progress-bar {<\/span>
\n    background-color<\/span>:<\/span> #0069d9<\/span>;<\/span>
\n}<\/span>
\nprogress.amplitude-song-played-progress[<\/span>value<\/span>]<\/span>::<\/span>-webkit-progress-value {<\/span>
\n    background-color<\/span>:<\/span> #0069d9<\/span>;<\/span>
\n}<\/span><\/div><\/div>\n

Il nous suffit maintenant d’uploader nos MP3 dans le dossier que l’on souhaite et d’indiquer \u00e0 \u00ab\u00a0amplitude\u00a0\u00bb de les prendre en charge. <\/p>\n

<<\/span>script><\/span>
\n    Amplitude.init<\/span>(<\/span>{<\/span>
\n        "songs"<\/span>:<\/span> [<\/span>
\n            {<\/span>
\n                "name"<\/span>:<\/span> "Le bal masqu\u00e9"<\/span>,<\/span>
\n                "artist"<\/span>:<\/span> "Opium du peuple"<\/span>,<\/span>
\n                "album"<\/span>:<\/span> "La r\u00e9volte des opiumettes"<\/span>,<\/span>
\n                "url"<\/span>:<\/span> ".\/song\/le-bal-masque.mp3"<\/span>,<\/span>
\n            }<\/span>,<\/span>
\n            {<\/span>
\n                "name"<\/span>:<\/span> "Poup\u00e9e de cire, poup\u00e9e de son"<\/span>,<\/span>
\n                "artist"<\/span>:<\/span> "Opium du peuple"<\/span>,<\/span>
\n                "album"<\/span>:<\/span> "La r\u00e9volte des opiumettes"<\/span>,<\/span>
\n                "url"<\/span>:<\/span> ".\/song\/poupee-de-cire.mp3"<\/span>,<\/span>
\n            }<\/span>
\n        ]<\/span>,<\/span>
\n        callbacks:<\/span> {<\/span>
\n            \/\/pour d\u00e9marrer la lecture \u00e0 cuaque fois que l'on passe au morceau suivant ou pr\u00e9c<\/span>
\n            song_change:<\/span> function<\/span> (<\/span>)<\/span> {<\/span>
\n                Amplitude.play<\/span>(<\/span>)<\/span>;<\/span>
\n            }<\/span>
\n        }<\/span>
\n    }<\/span>)<\/span>;<\/span>
\n<\/<\/span>script><\/span><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

Aujourd’hui nous allons d\u00e9couvrir AmplitudeJS qui permet de mettre en place sur vos page un lecteur audio flexible et compl\u00e8tement personnalisable. Comme on peux le voir sur leurs exemples avec un peu de travail on peux avoir des r\u00e9sultats tr\u00e8s sympas. Avant d’en arriver la, je vous propose un exemple bien plus simple. Le r\u00e9sultat […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2,11],"tags":[],"class_list":["post-238","post","type-post","status-publish","format-standard","hentry","category-developpement","category-javascript"],"acf":[],"yoast_head":"\nJavascript : Mettre en place un lecteur audio avec "AmplitudeJS" - Pense b\u00eate d'un d\u00e9veloppeur web<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Javascript : Mettre en place un lecteur audio avec "AmplitudeJS" - Pense b\u00eate d'un d\u00e9veloppeur web\" \/>\n<meta property=\"og:description\" content=\"Aujourd’hui nous allons d\u00e9couvrir AmplitudeJS qui permet de mettre en place sur vos page un lecteur audio flexible et compl\u00e8tement personnalisable. Comme on peux le voir sur leurs exemples avec un peu de travail on peux avoir des r\u00e9sultats tr\u00e8s sympas. Avant d’en arriver la, je vous propose un exemple bien plus simple. Le r\u00e9sultat […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/\" \/>\n<meta property=\"og:site_name\" content=\"Pense b\u00eate d'un d\u00e9veloppeur web\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-06T21:33:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-07T08:42:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/numa-bord.com\/miniblog\/wp-content\/uploads\/2018\/01\/amplitude-player.jpg\" \/>\n<meta name=\"author\" content=\"Numa\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Numa\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/\"},\"author\":{\"name\":\"Numa\",\"@id\":\"https:\/\/numa-bord.com\/miniblog\/#\/schema\/person\/f9d00acd1703f17e5a6895283eb46a7e\"},\"headline\":\"Javascript : Mettre en place un lecteur audio avec \u00ab\u00a0AmplitudeJS\u00a0\u00bb\",\"datePublished\":\"2018-01-06T21:33:03+00:00\",\"dateModified\":\"2018-01-07T08:42:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/\"},\"wordCount\":267,\"commentCount\":4,\"image\":{\"@id\":\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/numa-bord.com\/miniblog\/wp-content\/uploads\/2018\/01\/amplitude-player.jpg\",\"articleSection\":[\"D\u00e9veloppement\",\"Javascript\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/\",\"url\":\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/\",\"name\":\"Javascript : Mettre en place un lecteur audio avec \\\"AmplitudeJS\\\" - Pense b\u00eate d'un d\u00e9veloppeur web\",\"isPartOf\":{\"@id\":\"https:\/\/numa-bord.com\/miniblog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/numa-bord.com\/miniblog\/wp-content\/uploads\/2018\/01\/amplitude-player.jpg\",\"datePublished\":\"2018-01-06T21:33:03+00:00\",\"dateModified\":\"2018-01-07T08:42:19+00:00\",\"author\":{\"@id\":\"https:\/\/numa-bord.com\/miniblog\/#\/schema\/person\/f9d00acd1703f17e5a6895283eb46a7e\"},\"breadcrumb\":{\"@id\":\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#primaryimage\",\"url\":\"https:\/\/numa-bord.com\/miniblog\/wp-content\/uploads\/2018\/01\/amplitude-player.jpg\",\"contentUrl\":\"https:\/\/numa-bord.com\/miniblog\/wp-content\/uploads\/2018\/01\/amplitude-player.jpg\",\"width\":1120,\"height\":128},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Accueil\",\"item\":\"https:\/\/numa-bord.com\/miniblog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Javascript : Mettre en place un lecteur audio avec \u00ab\u00a0AmplitudeJS\u00a0\u00bb\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/numa-bord.com\/miniblog\/#website\",\"url\":\"https:\/\/numa-bord.com\/miniblog\/\",\"name\":\"Pense b\u00eate d'un d\u00e9veloppeur web\",\"description\":\"(php, javascript, Symfony, Wordpress....)\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/numa-bord.com\/miniblog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/numa-bord.com\/miniblog\/#\/schema\/person\/f9d00acd1703f17e5a6895283eb46a7e\",\"name\":\"Numa\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/f21d1af4658a7106211915940584534c1e0b3eef3f12eb67a697686cad70b64a?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f21d1af4658a7106211915940584534c1e0b3eef3f12eb67a697686cad70b64a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f21d1af4658a7106211915940584534c1e0b3eef3f12eb67a697686cad70b64a?s=96&d=mm&r=g\",\"caption\":\"Numa\"},\"url\":\"https:\/\/numa-bord.com\/miniblog\/author\/negonner\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Javascript : Mettre en place un lecteur audio avec \"AmplitudeJS\" - Pense b\u00eate d'un d\u00e9veloppeur web","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/","og_locale":"fr_FR","og_type":"article","og_title":"Javascript : Mettre en place un lecteur audio avec \"AmplitudeJS\" - Pense b\u00eate d'un d\u00e9veloppeur web","og_description":"Aujourd’hui nous allons d\u00e9couvrir AmplitudeJS qui permet de mettre en place sur vos page un lecteur audio flexible et compl\u00e8tement personnalisable. Comme on peux le voir sur leurs exemples avec un peu de travail on peux avoir des r\u00e9sultats tr\u00e8s sympas. Avant d’en arriver la, je vous propose un exemple bien plus simple. Le r\u00e9sultat […]","og_url":"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/","og_site_name":"Pense b\u00eate d'un d\u00e9veloppeur web","article_published_time":"2018-01-06T21:33:03+00:00","article_modified_time":"2018-01-07T08:42:19+00:00","og_image":[{"url":"https:\/\/numa-bord.com\/miniblog\/wp-content\/uploads\/2018\/01\/amplitude-player.jpg","type":"","width":"","height":""}],"author":"Numa","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Numa","Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#article","isPartOf":{"@id":"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/"},"author":{"name":"Numa","@id":"https:\/\/numa-bord.com\/miniblog\/#\/schema\/person\/f9d00acd1703f17e5a6895283eb46a7e"},"headline":"Javascript : Mettre en place un lecteur audio avec \u00ab\u00a0AmplitudeJS\u00a0\u00bb","datePublished":"2018-01-06T21:33:03+00:00","dateModified":"2018-01-07T08:42:19+00:00","mainEntityOfPage":{"@id":"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/"},"wordCount":267,"commentCount":4,"image":{"@id":"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#primaryimage"},"thumbnailUrl":"https:\/\/numa-bord.com\/miniblog\/wp-content\/uploads\/2018\/01\/amplitude-player.jpg","articleSection":["D\u00e9veloppement","Javascript"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/","url":"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/","name":"Javascript : Mettre en place un lecteur audio avec \"AmplitudeJS\" - Pense b\u00eate d'un d\u00e9veloppeur web","isPartOf":{"@id":"https:\/\/numa-bord.com\/miniblog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#primaryimage"},"image":{"@id":"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#primaryimage"},"thumbnailUrl":"https:\/\/numa-bord.com\/miniblog\/wp-content\/uploads\/2018\/01\/amplitude-player.jpg","datePublished":"2018-01-06T21:33:03+00:00","dateModified":"2018-01-07T08:42:19+00:00","author":{"@id":"https:\/\/numa-bord.com\/miniblog\/#\/schema\/person\/f9d00acd1703f17e5a6895283eb46a7e"},"breadcrumb":{"@id":"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#primaryimage","url":"https:\/\/numa-bord.com\/miniblog\/wp-content\/uploads\/2018\/01\/amplitude-player.jpg","contentUrl":"https:\/\/numa-bord.com\/miniblog\/wp-content\/uploads\/2018\/01\/amplitude-player.jpg","width":1120,"height":128},{"@type":"BreadcrumbList","@id":"https:\/\/numa-bord.com\/miniblog\/javascript-mettre-place-lecteur-audio-amplitudejs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Accueil","item":"https:\/\/numa-bord.com\/miniblog\/"},{"@type":"ListItem","position":2,"name":"Javascript : Mettre en place un lecteur audio avec \u00ab\u00a0AmplitudeJS\u00a0\u00bb"}]},{"@type":"WebSite","@id":"https:\/\/numa-bord.com\/miniblog\/#website","url":"https:\/\/numa-bord.com\/miniblog\/","name":"Pense b\u00eate d'un d\u00e9veloppeur web","description":"(php, javascript, Symfony, Wordpress....)","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/numa-bord.com\/miniblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/numa-bord.com\/miniblog\/#\/schema\/person\/f9d00acd1703f17e5a6895283eb46a7e","name":"Numa","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/f21d1af4658a7106211915940584534c1e0b3eef3f12eb67a697686cad70b64a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f21d1af4658a7106211915940584534c1e0b3eef3f12eb67a697686cad70b64a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f21d1af4658a7106211915940584534c1e0b3eef3f12eb67a697686cad70b64a?s=96&d=mm&r=g","caption":"Numa"},"url":"https:\/\/numa-bord.com\/miniblog\/author\/negonner\/"}]}},"_links":{"self":[{"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/posts\/238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/comments?post=238"}],"version-history":[{"count":7,"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/posts\/238\/revisions"}],"predecessor-version":[{"id":247,"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/posts\/238\/revisions\/247"}],"wp:attachment":[{"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/media?parent=238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/categories?post=238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/numa-bord.com\/miniblog\/wp-json\/wp\/v2\/tags?post=238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}