Custom Audio Player with YouTube API

Developer
Emerson Thompson
Size
4,077 Kb
Views
64,768
  1. Custom Audio Player with YouTube API Previews
  2. Custom Audio Player with YouTube API HTML Codes
  3. Custom Audio Player with YouTube API CSS Codes
  4. Custom Audio Player with YouTube API JS Codes

How do I make an custom audio player with youtube api?

What is a custom audio player with youtube api? How do you make a custom audio player with youtube api? This script and codes were developed by Emerson Thompson on 11 August 2022, Thursday.

Custom Audio Player with YouTube API Previews
IQ Test

Custom Audio Player with YouTube API - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom Audio Player with YouTube API</title> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="display hidden"> <iframe id="video" src="//www.youtube.com/embed/LdQjndOvNn4?controls=0&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1&amp;html5=1" frameborder="0" allowfullscreen="allowfullscreen"></iframe> </div> <footer class="footer"><img class="thumb" src="http://img.youtube.com/vi/LdQjndOvNn4/mqdefault.jpg"/> <div class="bar"> <div id="progressBar"> <div></div> </div> </div> <div class="controls"> <button class="icon-fast-backward"></button> <button class="icon-play" id="play"></button> <button class="icon-pause" id="pause"></button> <button class="icon-fast-forward"></button> </div> </footer>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Custom Audio Player with YouTube API - Script Codes CSS Codes

* { margin: 0; padding: 0; outline: none; box-sizing: border-box;
}
html,
body { width: 100%; height: 100%;
}
body { padding-top: 20%; background-image: -webkit-linear-gradient(54deg, #c05a9c, #223971); background-image: linear-gradient(36deg, #c05a9c, #223971);
}
.container { width: 400px; margin: 0 auto; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5); line-height: 0;
}
.display { position: relative; height: 0; width: 100%; padding-bottom: 50%; padding-top: 25px; overflow: hidden;
}
.display iframe { position: absolute; top: 0; left: 0; width: 100%; max-width: 100%; height: 100%;
}
.display.hidden { padding: 0;
}
.footer { position: relative; background: #FFF;
}
.footer .thumb { position: absolute; top: 50%; left: 15px; width: 140px; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.footer .bar { background-color: #ddd; width: 100%; padding: 0 5px 0 160px;
}
.footer #progressBar { height: 6px; overflow: hidden;
}
.footer #progressBar div { margin-top: 2px; height: 2px; width: 0; background-color: #2c3e50;
}
.footer .controls { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
}
.footer .controls button { display: block; width: 50px; height: 50px; font-size: 15px; color: #bbb; background: transparent; border: none; cursor: pointer;
}
.footer .controls button:first-child { border-right: 1px solid #EEE;
}
.footer .controls button:last-child { border-left: 1px solid #EEE;
}

Custom Audio Player with YouTube API - Script Codes JS Codes

var player;
function onYouTubePlayerAPIReady() { player = new YT.Player('video', { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } });
}
function onPlayerReady(event) { var playButton = document.getElementById("play"), pauseButton = document.getElementById("pause"); playButton.addEventListener("click", function() { player.playVideo(); }); pauseButton.addEventListener("click", function() { player.pauseVideo(); });
}
function progress(percent, $element) { var progressBarWidth = percent * $element.width() / 100; $element.find('div').animate({ width: progressBarWidth });
}
function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING) { var playerTotalTime = player.getDuration(); var mytimer = setInterval(function() { var playerCurrentTime = player.getCurrentTime(); var playerTimeDifference = (playerCurrentTime / playerTotalTime) * 100; console.log(playerCurrentTime); progress(playerTimeDifference, $('#progressBar')); }, 1000); } else { clearTimeout(mytimer); }
}
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
Custom Audio Player with YouTube API - Script Codes
Custom Audio Player with YouTube API - Script Codes
Home Page Home
Developer Emerson Thompson
Username thompsonemerson
Uploaded August 11, 2022
Rating 3
Size 4,077 Kb
Views 64,768
Do you need developer help for Custom Audio Player with YouTube API?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Emerson Thompson (thompsonemerson) Script Codes
Name
Minimalist Email - Flex Box
CardMove
Filtro de palavras com JavaScript
Hashtag Instagram - AngularJS
Hello World - Angular 2
Spider-man with Box-shadow CSS
Brazil Map SVG
Reactions Facebook
Milligram - Logo Animation SVG
UI Elements - Flat Design
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!