@speechkit/speechkit-audio-player
Version:
A web player component that can play audio from https://speechkit.io
123 lines (115 loc) • 5.94 kB
HTML
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<meta content='player' name='twitter:card'>
<meta content='@speechkit_io' name='twitter:site'>
<meta content='VAST test article for Ads ' name='twitter:title'>
<meta content='VAST test article for Ads provided by @speechkit_io' name='twitter:description'>
<meta content='https://staging.spkt.io/a/275379' name='twitter:player'>
<meta content='545' name='twitter:player:width'>
<meta content='75' name='twitter:player:height'>
<meta content='https://speechkit-staging.s3.amazonaws.com/audio/projects/3024/podcasts/275379/media/bea8de26a22e1f4f75d946ea3ee20b22_compiled.mp3' name='twitter:player:stream'>
<meta content='audio/mpeg' name='twitter:player:stream:content_type'>
<base target='_blank'>
<script src='https://s3-eu-west-1.amazonaws.com/speechkit-js/3.16.6/speechkit-player.js' type='text/javascript'></script>
<style>
</style>
<script async='async' src='https://www.googletagmanager.com/gtag/js?id=UA-52360836-1'></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-52360836-1');
</script>
</head>
<body>
<body style="height: 2000px;">
<div id="app" class="app">
<div id="speechkit-player"></div>
</div>
<script src="./speechkit-player.js"></script>
<script>
(function() {
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&#]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
var podcast = {"id":"ac477cc0-4f5b-4a7d-81a3-f7c8ddc89102","podcast_id":272851,"url":"http://www.test.com","title":"test article ","author":"oli","summary":"test are... ","image":null,"published_at":"2019-09-17T17:51:06.243Z","body":"test are ","state":"processed","share_url":"https://staging.spkt.io/a/272851","share_version":"v2","media":[{"id":2171440,"role":"body","content_type":"application/x-mpegURL","url":"https://speechkit-staging.s3.amazonaws.com/audio/projects/2911/podcasts/272851/media/351059e8fdcf307c7b3ce53c0cb5fadb.m3u8","download_url":null,"created_at":"2019-09-17T17:51:14.627Z","updated_at":"2019-09-17T17:51:15.016Z","state":"processed","duration":2.886722,"voice":{"id":309,"language":"en_GB","name":"Brian"}},{"id":2171438,"role":"body","content_type":"audio/mpeg","url":"https://speechkit-staging.s3.amazonaws.com/audio/projects/2911/podcasts/272851/media/ea318f6a5959e9139dad6fe3efb036c5_compiled.mp3","download_url":null,"created_at":"2019-09-17T17:51:14.252Z","updated_at":"2019-09-17T17:51:14.315Z","state":"processed","duration":2.899592,"voice":{"id":309,"language":"en_GB","name":"Brian"}}],"player_type":"EmbeddedPlayer","next_podcast_external_id":null,"ad_disabled":false};
var articleUrl = getParameterByName('articleUrl');
var player = 'MinimalPlayer';
var isAmp = !!getParameterByName('amp');
var withDownloadButton = false;
var campaignJson = null;
var campaignId = 196;
var vastAdTag = "null";
if (vastAdTag == 'null') { vastAdTag = null; }
// Resolve articleurl if no podcast and if not passed
if (!podcast && !articleUrl) {
articleUrl = document.referrer;
if (document.referrer.indexOf('https://m.nettavisen.no') !== -1) {
articleUrl = document.referrer.replace('https://m.', 'https://www.');
}
if (document.referrer.indexOf('http://testm.standaard.be') !== -1) {
articleUrl = document.referrer.replace("http://testm", "http://test");
}
}
// if there is a fragment identifier #hash appended to URL, remove from string
if(articleUrl) {
var sAMPPrefixRegex = /[a-z-]+\.cdn\.ampproject\.org\/v\/s\//g;
if (articleUrl.match(sAMPPrefixRegex)) {
articleUrl = articleUrl.replace(sAMPPrefixRegex, '');
}
// strip out params for forbes
if ((articleUrl.indexOf('https://forbes.com') !== -1) ||
(articleUrl.indexOf('https://www.forbes.com') !== -1) ||
(articleUrl.indexOf('https://www-staging.forbes.com') !==-1)) {
articleUrl = articleUrl.split('?')[0];
var regex = /\/amp\//g;
if (articleUrl.match(regex)) {
articleUrl = articleUrl.replace(regex, '/');
}
}
articleUrl = articleUrl.split('#')[0];
}
// if publisher has vast tag, run adswizz script and add cachebuster and duration
if(vastAdTag) {
try{ vastAdTag=com_adswizz_synchro_decorateUrl(vastAdTag);} catch(e){console.log('adswizz error',e); }
var cb = '&cb=' + (Math.round(new Date().getTime() / 1000));
vastAdTag += cb;
}
// Run SK
new SpeechKit.players({
player: player,
skBackend: "https://staging.spkt.io",
renderNode: 'speechkit-player',
apiKey: "read_33dbe2628d957eefe4a73b57c95c3e27",
projectId: "2911",
customAdMedia: campaignJson,
projectCampaignId: campaignId,
podcastUrl: "http://www.test.com",
publisherId: "1085",
publisher: "PLAYER AD PROJECT",
publisherLogo: "",
publisherColor: "#38a65d",
language: "en_GB",
podcast: podcast,
articleUrl: articleUrl,
feedbackUrl: "https://staging.spkt.io/rate/basic",
message: "",
isAmp: isAmp,
vastAdTag: vastAdTag,
withDownloadButton: withDownloadButton
}).then(function(currentPlayer) {
currentPlayer.load();
});
})()
</script>
</body>
</html>