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>
Related
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>
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.
So, I've had some issues with this. Simply put, I want to have a play button on my webpage which plays TWO files simultaniously. The files are Jazz.ogg with Jazz.mp3 and Rain.ogg with Rain.mp3. The play button in the HTML is put such as;
<div class="play">
<img src="play.png" style="height: 100%; width: 100%;">
</div>
I have a bit of experience with HTML and CSS, but when it comes to Javascript, I'm as much of use as the font-stretch element.
This is an html5 solution.
Music will be played only once you clicked the play image.
<body>
<script>
function playMusic() {
var jazzMusic = document.getElementById("audio-jazz");
jazzMusic.play();
var rainMusic = document.getElementById("audio-rain");
rainMusic.play();
}
</script>
<div class="play">
<img src="play.png" style="height: 100%; width: 100%;" onclick="playMusic();">
</div>
<audio id="audio-jazz" src="Jazz.ogg"></audio>
<audio id="audio-rain" src="Rain.ogg"></audio>
</body>
Make sure to add the right path to your .ogg files.
Something like this should work for you:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin audio test</title>
</head>
<body>
<div id="play">
<img src="play.png" style="height: 100%; width: 100%;">
</div>
<audio id="audio-jazz">
<source src="jazz.ogg" type="audio/ogg">
<source src="jazz.mp3" type="audio/mpeg">
</audio>
<audio id="audio-rain">
<source src="rain.ogg" type="audio/ogg">
<source src="rain.mp3" type="audio/mpeg">
</audio>
<script>
var playButton = document.getElementById('play');
var rainAudio = document.getElementById('audio-rain');
var jazzAudio = document.getElementById('audio-jazz');
playButton.onclick = function(){
rainAudio.play();
jazzAudio.play();
return false;
};
</script>
</body>
</html>
Here is a working (simplified) example: https://jsbin.com/yikifozedi/1/edit
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;
}
});
I've understood how to mute an <audio> sound object by putting this code :
<a href="#" onclick="document.getElementById('ambiance').muted = true; return false">
mute sound
</a>
Now I'm searching how to mute/unmute my sound using the same button with the option to toggle it ?
Can anyone give me directions?
var audioElm = document.getElementById('ambiance'); audioElm.muted = !audioElm.muted;
Try this:
.unmute {
background-image: url(http://franriavilla.in/images/unmute.png);
background-size: cover;
width: 35px;
height: 30px;
cursor: pointer;
}
.mute {
background-image: url(http://franriavilla.in/images/mute.png);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="track" autoplay="autoplay" loop="loop">
<source src="audio/ThemePackNet.mp3" type="audio/ogg" />
</audio>
<div class='unmute' onclick="document.getElementById('track').muted = !document.getElementById('track').muted;$(this).toggleClass('mute')"></div>