I am trying to customise audio tag in HTML5. To play around with controls is easy but is there a way to show and customise the progress bar of the track and volume controller?
Here's an example of javascript controlled audio player that uses css stylable elems:
<!doctype html>
<html lang="en">
<head>
<style>
html, body {padding:50px;}
* {margin:0px;padding:0px;}
#audioWrapper {position:relative;display:inline-block;}
.audioPlayer {position:absolute;left:0px;bottom:0px;
display: block;height:48px;width:400px;}
#playPauseButton {position: absolute;top: 13px;left: 10px;
display:inline;width: 18px;height: 22px;
background: url(/images/player.png) no-repeat -20px -2px;
cursor: pointer;}
#playPauseButton.playing {background-position:0px -2px;}
#playPauseButton:active {top:10px;}
#timeRemaining {position:absolute;top:17px;right:5px;font-size:11px;
font-weight:bold;color:#fff;}
#timeLine {position: absolute;top: 19px;left: 50px;right: 50px;
height: 6px;padding: 2px;border-radius: 5px;background: #546374;}
#slideHandle {position: absolute;top: -6px;left: 0;width: 20px;
height: 20px;margin-left: -10px;
background: url(/images/player.png) no-repeat -39px -3px;
cursor: pointer;}
.audioPlayerBackground {height:400px;width:400px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
function setupAudio(){
var userSetSliderPosition = false;
var audioSliderCreated = false;
if(!!document.createElement('audio').canPlayType) {
var audioElemStr = '<audio><source src="/sound/Mozart_-_Bassoon_Concerto_in_Bb_major_-_Allegro.ogg" type="audio/ogg"></source></audio>';
$(audioElemStr).insertAfter(".audioPlayer #timeRemaining");
audioPlayer = $('.audioPlayer audio').get(0);
slideHandle = $('.audioPlayer #slideHandle');
timeRemainingElem = $('.audioPlayer #timeRemaining');
$("#playPauseButton").click(function() {
if (audioPlayer.paused) { audioPlayer.play(); }
else { audioPlayer.pause(); }
});
$(audioPlayer).bind('play',function() {
$("#playPauseButton").addClass('playing');
}).bind('pause ended', function() {
$("#playPauseButton").removeClass('playing');
});
$(audioPlayer).bind('timeupdate', function() {
var audioPlayerDuration = audioPlayer.duration;
if (!userSetSliderPosition){
var audioPlayerCurrentTime = audioPlayer.currentTime;
var audioPlayerRemainingTime = parseInt(audioPlayerDuration - audioPlayerCurrentTime);
var slideHandlePercentComplete = (audioPlayerCurrentTime / audioPlayerDuration) * 100;
var minutes = parseInt(audioPlayerRemainingTime/60);
var seconds = parseInt(audioPlayerRemainingTime%60);
slideHandle.css({left: slideHandlePercentComplete + '%'});
timeRemainingElem.text(minutes + ':' + (seconds < 10 ? ('0' + seconds) : seconds));
}
if (!audioSliderCreated) {
audioSliderCreated = true;
$('.audioPlayer #timeLine').slider({
max: audioPlayerDuration,
step: 0.01,
animate: "slow",
slide: function() {
userSetSliderPosition = true;
},
stop:function(e,ui) {
userSetSliderPosition = false;
audioPlayer.currentTime = ui.value;
}
});
}
});
}
}
</script>
</head>
<body onload="setupAudio();">
<div id="audioWrapper">
<img class="audioPlayerBackground" alt="" src="/images/spaceJunk.png" />
<div class="audioPlayer">
<div id="playPauseButton"></div>
<div id="timeLine">
<div id="slideHandle" class ="ui-slider-handle"></div>
</div>
<div id="timeRemaining"></div>
<!--audio and source tags will be inserted here, if the browser supports them-->
</div>
</div>
</body>
</html>
You can see an example of it running here: http://www.vdstudios.net/tutorials/html/stylableAudioPlayer.html
I'd recommend playing the audio in the background, control it with your own custom built interface via JavaScript.
Related
This code will turn the bulb on/off but i want to make the lightbulbs keeps flashing. I've tried different methods and nothing works
<!DOCTYPE html>
<html>
<body>
<img id="bulb" onclick="switch()" src="off.png" width="100" height="180">
<p>On/Off</p>
<script>
function
switch () {
var image = document.getElementById('Bulb');
if (image.src.match("on")) {
image.src = "off.png";
} else {
image.src = "on.png";
}
}
</script>
</body>
</html>
Here is an example, using setInterval(). I have swapped the image to a div thats background changes color, but same principal applies.
I think its also worth pointing out that you could also do this with a css animation and then just use javascript to toggle the class onto the element. But assuming you just wanna stick to JS for now:
let flashInterval = null;
let flashSpeed = 100;
let bulb = document.getElementById('bulb');
function toggleBulb() {
if (bulb.classList.contains('on')) {
bulb.classList.remove('on');
} else {
bulb.classList.add('on');
}
}
function flashBulb() {
if (flashInterval === null) {
flashInterval = setInterval(() => {
toggleBulb();
}, flashSpeed);
} else {
clearInterval(flashInterval);
flashInterval = null;
}
}
document.getElementById('toggleBlub').addEventListener('click', toggleBulb);
document.getElementById('toggleFlash').addEventListener('click', flashBulb);
#bulb {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #ccc;
background: transparent:
}
.on {
background: #fcba03;
}
<div id="bulb" class=""></div>
<br>
<button id="toggleBlub">Bulb On/Off</button>
<br><br>
<button id="toggleFlash">Flash On/Off</button>
in my opinion, don't use setInterval but u can use a CSS animation rather than it.
You should know about js event and js reserve keyword and be sure to use good code editor so that you can see your error.
I see you trying to keep flashing but you used onclick event that is clickable it will not flashing.
here is the code below, which you want,
<!DOCTYPE html>
<html>
<body>
<img id="bulb" src="off.jpg" width="100" height="180">
<p>On/Off</p>
<script>
var myImage = document.querySelector('#bulb');
var update = setInterval(myUpdate, 1000);
function myUpdate() {
setTimeout(() => {
if (myImage.src.match('off.jpg')) {
myImage.src = 'on.jpg'
} else {
myImage.src = 'off.jpg'
}
}, 500)
}
</script>
</body>
</html>
or you can use onclick event, when you click than it will start flashing
here is the code below
<!DOCTYPE html>
<html>
<body>
<img id="bulb" onclick="mySwitch(this)" src="off.jpg" width="100" height="180">
<p>On/Off</p>
<script>
function mySwitch(myImage) {
var update = setInterval(myUpdate, 500);
function myUpdate() {
setTimeout(() => {
if (myImage.src.match('off.jpg')) {
myImage.src = 'on.JPG'
} else {
myImage.src = 'off.jpg'
}
}, 100)
console.log(myImage)
}
}
</script>
</body>
</html>
I changed your function name to switchBulb because switch is reserved
var intervalID = window.setInterval(switchBulb, 1000);
function switchBulb() {
var image = document.getElementById('bulb');
if (image.src.match("on")) {
image.src = "off.png";
} else {
image.src = "on.png";
}
}
I need to update calendar with some date highlighted, it's highlighting on initially if I call the function Highlight() where as it's not highlighting when I click the button and try to highlight. What could be the issue.
function Highlight() {
jQuery_cal('.calendar').datepicker('remove');
var eventDates = {};
eventDates[new Date('06/04/2018')] = new Date('06/04/2018');
eventDates[new Date('06/06/2018')] = new Date('06/06/2018');
eventDates[new Date('06/20/2018')] = new Date('06/20/2018');
eventDates[new Date('06/25/2018')] = new Date('06/25/2018');
setUPRecordingCalendar(eventDates);
}
setUPRecordingCalendar({});
//Highlight();
function setUPRecordingCalendar(eventDates) {
// datepicker
jQuery_cal('#calendar').datepicker({
beforeShowDay: function(date) {
var highlight = eventDates[date];
if (highlight) {
return [true, "event", highlight];
} else {
return [true, '', ''];
}
}
});
}
.event a {
background-color: #42B373 !important;
background-image: none !important;
color: #ffffff !important;
}
.ui-datepicker {
font-size: 12px;
margin: 0 0 0 20px;
}
<html>
<body>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>
<script type="text/javascript">
var jQuery_cal = $.noConflict(true);
</script>
<div id="demo">
<div style="width:300px;height:225px;" id="calendar"> </div>
</div>
<button onclick="Highlight()"> Highlight</button>
</body>
</html>
Here is the fiddle link https://jsfiddle.net/20tszxbz/
I'm new and learning to code a website!
I'm trying to do this hover header that when the user scroll down, it will remain on the screen and when the user reaches Sub-Header 1, it will hover it too and changes if the user reaches Sub-Header 2(Sub-Header 1 will then disappear)
This is what I'm working on http://goo.gl/KqAM2R
Thanks in advance!
http://i.imgur.com/flT3oJ1.jpg
You need to use JavaScript to achieve this effect. SSCCE:
NewFile.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="NewFile.js"></script>
<link rel="stylesheet" type="text/css" href="NewFile.css"></head>
<body>
<header class="fixed-top">Europe</header>
<div class="much-text">doge</div>
<header class="whatever1 doge">Heatwave</header>
<div class="much-text">doge</div>
<header class="whatever2 doge">2k15</header>
<div class="much-text">doge</div>
</body>
</html>
NewFile.js:
function isElementInViewport (el, topOrBottom) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
if(topOrBottom == "top"){
return rect.top >= 0;
}else{
return rect.bottom <= $(window).height();
}
}
function onVisibilityChange () {
var headers = document.getElementsByClassName("doge");
var headerAbove = null;
for(i = 0; i<headers.length; i++){
$( headers[i]).css("position","");
$( headers[i]).css("top","");
if(!isElementInViewport(headers[i], "top")){
headerAbove = headers[i];
}
}
if(headerAbove != null){
$( headerAbove).css("position","fixed");
$( headerAbove).css("top","30px");
}
}
$(window).on('DOMContentLoaded load resize scroll', onVisibilityChange);
And NewFile.css
#CHARSET "UTF-8";
.fixed-top{
width:100%;
position:fixed;
top:0px;
background-color: red;
}
.whatever1{
width:100%;
background-color: green;
}
.whatever2{
width:100%;
background-color: blue;
}
.much-text{
height: 2000px;
}
.doge {
}
Thanks to authors of answers in How to tell if a DOM element is visible in the current viewport? for an inspiration. Also, I am aware that this code doesn't meet all good practices writing in js & css but OP clearly can find the idea from this one. Notice that you may need to sort headers (from the top header to the bottom header) in your own way before iterating on them in function onVisibilityChange
Try this...
HTML
<div id="page" class="page">
<div class="container">
<div class="contentheadercontainer">
<div class="fsh"><div class="firstheader">Sub header 1</div></div>
<div class="fsh"><div class="secondheader" id='secondheader'><p style='margin-left: 15px;'>Sub header 2</p></div></div>
</div>
</div>
</div>
</div>
CSS
body{
padding: 0px; margin: 0px;
}
.container{
height: 1000px;
}
.fsh{
position: absolute; width: 100%;
}
.firstheader{
height: 30px;width: 100%; position:fixed; background: #B14345; padding: 15px; color: #fff;
}
.secondheader{
border-top: 1px solid #bbb; padding: 5px 0px 5px 0px; margin-top: 300px; width: 100%; background: #B14345;color: #fff;
}
Javascript
document.addEventListener("scroll", function(){
scrollDetect();
});
function scrollDetect(){
var html = document.documentElement;
var top = (window.pageYOffset || html.scrollTop) - (html.clientTop || 0);
if(top > 235){
document.getElementById('secondheader').style.position = 'fixed';
document.getElementById('secondheader').style.marginTop = '60px';
document.getElementById('secondheader').style.width='100%';
}else{
document.getElementById('secondheader').style.position = 'inherit';
document.getElementById('secondheader').style.marginTop = '300px';
}
}
Check out this JSFiddle
i want to use mouse drag in angularjs to change style of html element.i use this module to inject mouse drag in angular.Now how change li element style with mouse drag? in fact my sample code is a time line so when a user mouse drag on this time line years change.
/**!
* AngularJS mouse drag directive
* #author Ozan Tunca <ozan#ozantunca.org>
* #version 0.1.0
*/
(function() {
var ngMousedrag = angular.module('ngMouseDrag', []);
ngMousedrag.directive('ngMousedrag', ['$document', function ngMousedrag($document) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var endTypes = 'touchend mouseup'
, moveTypes = 'touchmove mousemove'
, startTypes = 'touchstart mousedown'
, startX, startY;
element.bind(startTypes, function startDrag(e) {
e.preventDefault();
startX = e.pageX;
startY = e.pageY;
$document.bind(moveTypes, function (e) {
e.dragX = e.pageX - startX;
e.dragY = e.pageY - startY;
e.startX = startX;
e.startY = startY;
scope.$event = e;
scope.$eval(attrs.ngMousedrag);
});
$document.bind(endTypes, function () {
$document.unbind(moveTypes);
});
});
}
};
}]);
})();
#draggable {
width: 200px;
height: 200px;
position: absolute;
background: red;
cursor: move;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Angular Mousedrag Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div id="wrapper" ng-controller="Slider">
<div ng-init="years=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79]">
<ol id="draggable" ng-mousedrag="onMouseDrag($event);">
<li ng-repeat="y in years">{{y}}
</li>
</ol>
</div>
</div>
</div>
<script type="text/javascript">
(function() {
angular.module('myApp', ['ngMouseDrag'])
.controller('Slider', function($scope, $compile) {
$scope.dragY = 0;
$scope.onMouseDrag = function($event) {
var draggableObject = document.getElementById('draggable');
draggableObject.style.top = $event.pageY + 'px';
$scope.dragY = $event.pageY;
$scope.$digest();
}
});
angular.bootstrap(document, ['myApp']);
})();
</script>
</body>
</html>
i am exploring the API of the get user media and tried running the api in my localhost with sample code attached below
It is working fine in jsbin here
but completely fails in localhost with below errors
Uncaught TypeError: Cannot read property 'addEventListener' of null capture.html:43
Uncaught TypeError: Cannot set property 'src' of null
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<script>
(function() {
var streaming = false,
video = document.querySelector('#video'),
cover = document.querySelector('#cover'),
canvas = document.querySelector('#canvas'),
photo = document.querySelector('#photo'),
startbutton = document.querySelector('#startbutton'),
width = 200,
height = 0;
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia(
{
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL ? vendorURL.createObjectURL(stream) : stream;
}
video.play();
},
function(err) {
console.log("An error occured! " + err);
}
);
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
function takepicture() {
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
startbutton.addEventListener('click', function(ev){
takepicture();
ev.preventDefault();
}, false);
})();
</script>
<style>
html {
background: #111111;
height: 100%;
background: linear-gradient( #333, #000);
}
canvas {
display: none;
}
video, img, #startbutton {
display: block;
float: left;
border: 10px solid #fff;
border-radius: 10px;
}
#startbutton {
background: green;
border: none;
color: #fff;
margin: 100px 20px 20px 20px;
padding: 10px 20px;
font-size: 20px;
}
#container {
overflow: hidden;
width: 880px;
margin: 20px auto;
}
</style>
</head>
<body>
<video id="video"></video>
<button id="startbutton">Take photo</button>
<canvas id="canvas"></canvas>
<img src="http://placekitten.com/g/200/150" id="photo" alt="photo">
</body>
</html>
It is because your script is trying to access html elements that have not been created yet. HTML is read from the top down. Move your script into the body of your page, or tell it not to execute until the whole page loads.
It worked fine for me when I moved your script to the body instead of the head of the page.