How do I add my additional button to this jQuery mp3 player? - javascript

I want to add button that let user back 30 seconds during listening songs in mp3 player but the hell I can't do it. I am playing with this for hours, here's what I use http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player. What I have got already
code for 30 sec back
// jump 30 seconds back when we click the button
$('.audioplayer-back30s').click(function(){
var audio = $('audio');
var backToSec = audio.currentTime - 30;
// make sure that we jump to a valid point in time
audio.currentTime = (backToSec >= 0) ? backToSec : 0;
});
html
<head>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700" />
<link rel="stylesheet" href="../../assets/css/audioplayer.css" />
<script src="../../assets/js/jquery.js"></script>
<script src="../../assets/js/audioplayer.js"></script>
</head>
<body>
<div class="container">
<br><br><br><br>
<div class="jumbotron">
<div class="thumbnail">
<br><br><br><br>
<h2 style="text-align: center;">You are listening mp3 number 1</h2>
<br><br><br><br>
<div id="wrapper">
<audio preload="auto" controls>
<source src="../../assets/media/audio/BlueDucks_FourFlossFiveSix.mp3">
</audio>
</div>
</div>
<div class="team">
<a><img src="http://i57.tinypic.com/30t6gd2.jpg"</a>
</div>
<div class="team" style="float: right;">
<a><img src="http://i61.tinypic.com/29zv7u8.png"</a>
</div>
</div>
</div>
<script>$( function() { $( 'audio' ).audioPlayer(); } );</script>
<script>
/*
VIEWPORT BUG FIX
iOS viewport scaling bug fix, by #mathias, #cheeaun and #jdalton
*/
(function(doc){var addEvent='addEventListener',type='gesturestart',qsa='querySelectorAll',scales=[1,1],meta=qsa in doc?doc[qsa]('meta[name=viewport]'):[];function fix(){meta.content='width=device-width,minimum-scale='+scales[0]+',maximum-scale='+scales[1];doc.removeEventListener(type,fix,true);}if((meta=meta[meta.length-1])&&addEvent in doc){fix();scales=[.25,1.6];doc[addEvent](type,fix,true);}}(document));
</script>
</body>
css
.audioplayer-back30s
{
width: 2.5em; /* 40 */
height: 100%;
text-align: left;
text-indent: -9999px;
cursor: pointer;
z-index: 2;
top: 0;
left: 0;
}
.audioplayer-back30s:hover,
.audioplayer-back30s:focus
{
background-color: #222;
}
.audioplayer-back30s a
{
display: block;
}
Rest of css and js files of this mp3 player are here http://tympanus.net/Development/AudioPlayer/AudioPlayer.zip . Really I don't have any ideas and I really need this feature, most problem is with creating just button. Thanks you guys for any response.

You need to bind the timeupdate event
Example
var audio = $('audio');
audio.on('timeupdate',function() {
var time = Math.floor(this.currentTime);
if (time > 5) {
this.currentTime = 0;
}
});

Related

html2canvas renders blank white image while capturing image of RTSP streaming

Here is my code. I am playing RTSP streaming. I want to take snap shot on click of button.
Although my code takes picture but it is blank white. I need help to diagnose the issue in my code. The play button plays the RTSP streaming and "Take Photo" button capture image.
I need help so that when I press click, the image could be rendered properly.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Script included -->
<script type="text/javascript" src="flashphoner.js"></script>
<script type="text/javascript" src="player-min.js"></script>
<script type="text/javascript" src="html2canvas.min.js"></script>
<script>
<!-- Main function to take picture -->
function takeshot()
{
window.scrollTo(0, 0);
let div = document.getElementById('play');
html2canvas(div, {
allowTaint: true,
useCORS: true
}).then(
function (canvas)
{
document.body.appendChild(canvas);
document.getElementById('snapshotImg').appendChild(canvas);
})
html2canvas(div, {
onrendered: function(canvas)
{
$("#canvas").append(canvas);
getCanvas = canvas;
}
});
}
</script>
</head>
<!-- CSS -->
<style>
.fp-Video
{
border: 1px double black;
width: 322px;
height: 242px;
}
.display
{
width: 100%;
height: 100%;
display: inline-block;
}
.display > video,
object {
width: 100%;
height: 100%;
}
</style>
<body onload="init_api()">
<!-- section will paly strp straming -->
<div class="fp-Video">
<div id="play" class="display"></div>
</div>
<!-- Button for play and take photo -->
<button id="playBtn">PLAY</button>
<button id="takephoto" onclick="takeshot();">Take Photo</button>
<div><img id="snapshotImg"></div>
<div id="canvas"></div>
<div id="snapshotBtn"></div>
</body>
</html>

Trying to add background music to web app

I created a whack a mole game. However, I am trying to add the Price is Right theme to the background as the user plays the game. Is there anything I need to add to the javascript to make this happen? I have the mp3 file saved inside of a sounds folder.
Here is the index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Whack A Mole</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Whack a Skeletor!</h1>
<h2>Your Score:</h2>
<h2 id="score">0</h2>
<h2>Seconds Left:</h2>
<h2 id="time-left">60</h2>
<div class="grid">
<div class="square" id="1"></div>
<div class="square" id="2"></div>
<div class="square" id="3"></div>
<div class="square" id="4"></div>
<div class="square" id="5"></div>
<div class="square" id="6"></div>
<div class="square" id="7"></div>
<div class="square" id="8"></div>
<div class="square" id="9"></div>
</div>
<script src="app.js"></script>
</body>
</html>
Here is the JavaScript file
const squares = document.querySelectorAll('.square');
const mole = document.querySelector('.mole');
const timeLeft = document.querySelector('#time-left');
const score = document.querySelector('#score');
let result = 0;
let hitPosition;
let currentTime = 60;
let timerId = null;
let evilLaugh = new Audio('sounds/laugh.mp3');
evilLaugh.volume = 0.3;
function randomSquare() {
squares.forEach((square) => {
square.classList.remove('mole');
});
let randomSquare = squares[Math.floor(Math.random() * 9)];
randomSquare.classList.add('mole');
hitPosition = randomSquare.id;
}
squares.forEach((square) => {
square.addEventListener('mousedown', () => {
if (square.id == hitPosition) {
result++;
score.textContent = result;
hitPosition = null;
}
});
});
function moveMole() {
timerId = setInterval(randomSquare, 500);
}
moveMole();
function countDown() {
currentTime--;
timeLeft.textContent = currentTime;
if (currentTime == 0) {
clearInterval(countDownTimerId);
clearInterval(timerId);
alert('GAME OVER! Your final score is ' + result);
evilLaugh.play();
}
}
let countDownTimerId = setInterval(countDown, 1000);
Here is the CSS file
* {
background-color: black;
color: red;
}
.square {
width: 200px;
height: 200px;
border-style: solid;
border-color: lime;
}
.grid {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-content: center;
width: 618px;
height: 618px;
}
.mole {
background-image: url(skeletor.jpeg);
background-size: cover;
}
What you're doing with evilLaugh is the same thing that you would do with your Price is Right sound. The only addition would be that we would need some way to repeat the song each time it ends, which is well covered in this Stack Overflow question. So you could do:
let myPriceAudio = new Audio('sounds/nameOfFile.mp3');
myPriceAudio.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
myPriceAudio.play();
The linked Stack Overflow question does say that all major browsers support myPriceAudio.loop = true;, so you could also do that instead of the .addEventListener() functionality.

Cookie expires when page reloads

When I set a cookie, it disappears after the page reloads. here is the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="mainx.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-
cookie/1.4.1/jquery.cookie.min.js"></script>
</head>
<body>
<style type="text/css">
body {margin: 0;}
.dropdown-notification {
height: 30px;
line-height: 40px;
position: relative;
top: -50px;
transition: top .8s;
text-align: center;
background: #FF9900;
color: white;
}
.dropdown-notification.active {
top: 0;
}
</style>
<div class="dropdown-notification text-center">
Cookies ensure the proper functioning of this site. By using it, you accept the use of cookies. <button class="close">Got it!</button>
</div>
<script type="text/javascript">
// Check if cookie
};
if ($.cookie("noti") !== "closed") {
$('.dropdown-notification').addClass('active');
}
// On button click close and add cookie (expires in 100 days)
$('.close').on('click', function(){
$.cookie("noti", "closed", { expires : 1000 });
document.cookie = "username=Player; expires=Thu, 18 Dec 3019 12:00:00 UTC";
$('.dropdown-notification').removeClass('active');
})
$('.delete-cookie').on('click', function(){
var R_U_sure = prompt("Are You Sure? if yes, type 'YES'. if not type 'NO'");
if (R_U_sure = "YES"){
$.cookie("noti", "open");
$('.dropdown-notification').addClass('active');
}
else{
console.log('cookie cleared.');
}
})
</script>
<button class="delete-cookie">Reset Progress?</button>
<DIV ID="main">
<div id="navigationbar"></div>
<div id="player">
<audio controls autoplay hidden>
<source src="FB1.mp3" type="audio/mpeg">
If you're reading this, audio isn't supported. :(
</audio>
</div>
<li>
<button class=""></button>
<button class=""></button>
<button class=""></button>
<button class=""></button>
</li>
</DIV>
</body>
</html>
The reset progress doesn't work. It is supposed to ask YES or NO. but nothing happens when I click it.
Is there somehow I can keep the cookie the next time someone visits the website?
Maybe PHP cookie?
The username cookie and the closed cookie disappear after the page reloads. I want the page to recognize the user and only show the cookie noti the first time. Other problem is the reset progress, mentioned on top.

HTML 5 Shoutcast Stream not working

So, I have a fairly simple setup.
The site can be viewed here
And the bootstrap library for the icons is here
<head>
<style>
#pButton{
height:60px;
width: 60px;
border: none;
background-size: 50% 50%;
background-position: center;
}
</style>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min$
<link href="css/ripples.min.css" rel="stylesheet">
<link href="css/material-wfont.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<audio id="music">
<source src="http://listen.fillyradio.com:8006/;stream" type="audio/mpeg" />
</audio>
<div id="audioplayer">
<button id="pButton" class="mdi-av-play-circle-outline" onclick"play()"></button>
</div>
</div>
<script>
// variable to store HTML5 audio element
var music = document.getElementById('music');
function play() {
if (music.paused) {
music.play();
pButton.className = "";
pButton.className = "mdi-av-pause-circle-outline";
} else {
music.pause();
pButton.className = "";
pButton.className = "mdi-av-play-circle-outline";
}
}
</script>
</body>
My issue? The player works fine with controls enabled, but I want to be able to use custom controls, not the default browser controls.
The button clicks, but doesn't imitate audio or change icons like it should.
Any ideas?
<button id="pButton" class="mdi-av-play-circle-outline" onclick"play()"></button>
you need = after your onclick
new
<button id="pButton" class="mdi-av-play-circle-outline" onclick="play()"></button>

images on multiple backgrounds

I am trying to set up a javascript/jquery to display rotating images, infact I am trying to put anything I can on top of my multiple image background... I was able to make a mock banner and that was a success but I can't place an unordered list, a picture or the rotating images on my site.
my html is
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/javascript/main.js" type="text/javascript"></script>
</head>
<body>
<div id="massiveWrapper">
<div id="header">
<img src="/images/banner.png" alt="banner" width="1024px" height="150px"/>
</div>
<div id="menu">
<ul>
<li>hello</li>
<li>hello</li>
</ul>
</div>
<div id="rotatingWrapper">
<img class="rotateImage" src="/images/blue.png" alt="Computers" width="1024px" height="200px" />
<img class="rotateImage" src="/images/red.png" alt="Computers" width="1024px" height="200px" />
<img class="rotateImage" src="/images/green.png" alt="Computers" width="1024px" height="200px" />
</div>
<div>
<img src="/images/blue.png" alt="blue" width="1024px" height="200px"/>
</div>
</div>
</body>
</html>
my css is
body {
background: url(/images/background-top.png) 0 0 repeat-x,
url(/images/menu.png) 0 160px repeat-x,
url(/images/background-middle.png) 0 210px repeat-x;
background-color: #dadada;
}
#massiveWrapper {
width: 1024px;
margin: auto;
}
#rotatingWrapper {
width: 1024px;
height: 200px;
}
.rotateImage {
display: none;
position: absolute;
top: 0;
left: 0;
}
and javascript is
$(window).load(function() { //start after HTML, images have loaded
var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 1000;
//interval between items (in milliseconds)
var itemInterval = 5000;
//cross-fade time (in milliseconds)
var fadeTime = 2500;
//count number of items
var numberOfItems = $('.rotateImage').length;
//set current item
var currentItem = 0;
//show first item
$('.rotateImage').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function(){
$('.rotateImage').eq(currentItem).fadeOut(fadeTime);
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.rotateImage').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
I really want to be able to have the rotating images I just cant for the life of me add anything new to the page. I have even added a dummy picture using div and img but that also wont show up... this is probably something small but yer I am new to coding.
Kane
You shouldn't add px to the width and height attributes of your images.
For example:
<img src="/images/banner.png" alt="banner" width="1024px" height="150px"/>
should be:
<img src="/images/banner.png" alt="banner" width="1024" height="150"/>

Categories

Resources