How to prevent multiple audio files playing the same time using jQuery? - javascript

I'm a complete newbie in the area of html/js. I need to create a very basic interface with 17 pictures. Each one, when clicked plays given sound.
After days of tinkering and looking for the right approach, I managed to create something that works and looks good, but with one small problem.
When one audio sample is triggered, clicking another picture should stop and reset the previous one. I found a lot of examples on this site, but my understanding of js syntax is so little I can't implement it properly.
I'd appreciate your help.
Here's what i have:
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track1').click(function() {
$('#1').append('<embed id="1" src="content/mp3/01.mp3" autostart="true" hidden="true"></embed>');
});
});
</script>
<img name="track1" src="content/img/01.jpg" width="180" height="180" border="0" id="track1" alt="" />
<div id="1"> </div>
I'd really appreciate your help.

I cleaned up a bit from the post that I linked you. Give this a try to see if it allows you to play and stop the audio.
$(document).ready(function() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'content/mp3/01.mp3');
$('#track1').click(function() {
audioElement.pause();
audioElement.currentTime = 0;
audioElement.play();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img name="track1" src="content/img/01.jpg" width="180" height="180" border="0" id="track1" alt="" />
<div id="1"> </div>

Maybe, to be more clear I post more of the code. The whole site consist of exactly the same "modules" multiplied 17 times. It looks as follows:
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track4').click(function(){
$('#4').append('<embed id="4" src="content/mp3/04.mp3" autostart="true" hidden="true"></embed>');
});
});
</script>
<img name="track4" src="content/img/04.jpg" width="180" height="180" border="0" id="track4" alt="" />
<div id="4"> </div>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#track3').click(function(){
$('#3').append('<embed id="3" src="content/mp3/03.mp3" autostart="true" hidden="true"></embed>');
});
});
</script>
<img name="track3" src="content/img/03.jpg" width="180" height="180" border="0" id="track3" alt="" />
<div id="3"> </div>

Related

Drag & drop files upload multiple with preview before upload - php, javascript

<div class="dragdrop">
<input type="file" name="files[]" multiple="multiple" />
</div>
<div class="preview">
<src class="image-1" href="" alt="" />
<src class="image-2" href="" alt="" />
<src class="image-3" href="" alt="" />
???
</div>
I'm looking for a simple drag & drop, not to be too complicated.I do not know how you can preview images, after the addition.
Also, if you click on an image, it must be the top priority.
$priority = $_POST['image-2'];
Thanks!
P.S.:
I check this, but no multiple: JSFIDDLE
Here is your solution:-
Make a test.php file and run this code. It will allow you to upload multiple files and you can preview them.
<html>
<head>
<title></title>
<script type="text/javascript" src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<input multiple="1" onchange="readURL(this);" id="uploadedImages" name="pictures[]" type="file">
<div id ="up_images"></div>
<script type="text/javascript">
var readURL = function(input) {
$('#up_images').empty();
var number = 0;
$.each(input.files, function(value) {
var reader = new FileReader();
reader.onload = function (e) {
var id = (new Date).getTime();
number++;
$('#up_images').prepend('<img id='+id+' src='+e.target.result+' width="100px" height="100px" data-index='+number+' onclick="removePreviewImage('+id+')"/>')
};
reader.readAsDataURL(input.files[value]);
});
}
</script>
</body>
</html>
Hope it will help you :)

On Click Image Doesn't Work

I made a script with an image and a javascript function but it doesn't work. It should redirect to www.moseso.de when you click the image. What's wrong with it?
<html>
<head>
<title>Hallo</title>
</head>
<body>
<img src="test.jpg" onclick="func" />
<script>
function func() {
window.location="www.moseso.de"
}
</script>
</body>
</html>
try setting:
onclick="func();"
also close the statement:
window.location="www.moseso.de";
You can try this:
<img src="test.jpg" alt="" class="img.my_clickable_image" />
<script>
$(document).ready(function() {
$('my_clickable_image').click(function() {
window.location.href = www.moseco.de';
});
});
</script>

How would I use this in my html structure?

I'm new to jquery and I don't want to end up doing the wrong thing, I've done everything else but, I'm stuck on this part. How do I hook this is up? I've tried using script tags, but I'm not sure if thats right.
$(document).ready(function() {
$('.menu').dropit()
});
Ok I've done what you guys suggested, but it still does not seem to work.
Heres the full code:
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="path/to/your/jquery/script.js"></script>
<script src="dropit.js"></script>
<link rel="stylesheet" href="dropit.css" type="text/css" />
<style>
body
{
background:url("");
background-size:0px 0px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
<STYLE>
<!--
a:hover{color:#c0c0c0;}
-->
</STYLE>
<style>
.navLink {
color: #000000;
text-decoration: none !important;}
ul
{
list-style-type:none;
font-size: SMALL;
font-family: 'Ubuntu Condensed', sans-serif;
font-weight: lighter;
font-style: regular;}
li
{
display:inline;
}
</style>
</head>
<body>
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="100" height="70">
<HR COLOR="#C0C0C0" WIDTH="100%">
<ul id="nav" >
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="450" height="1"> <li><a href="#">
MENS
<ul>
<li>Shirts</li>
<li>Jackets</li>
<li>Denim</li>
<li>Fleece</li>
</ul>
</li>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
<li>WOMEN'S</li>
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
<li>NEW ARRIVALS
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
<li>BLOG
<img border="0" src="http://www.miacreative.com/ESW/Images/WHITE-BOX-MID.png" alt="Vealed" width="30" height="1">
<li>SALE
</ul>
<HR COLOR="#C0C0C0" WIDTH="100%">
<ul id="nav" >
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="0" height="2">
<p><p align="center"><img border="0" src="http://img593.imageshack.us/img593/6192/5eo7.png" alt="Vealed" width="800" height="500">
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="70" height="2">
</ul>
<img border="0" src="http://az61389.vo.msecnd.net/6/_ui/img/mosaic/big-transparent-block.png" alt="Vealed" width="100" height="200"
<script type="text/javascript">
$(document).ready(function() {
$('.menu').dropit();
});
</script>
</body>
</html>
I wanted to make it so that all the links in the menu will have a drop down.
Put the script tag in between your head tags like so
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
</head>
put this right before the closing body tag like so
<script type="text/javascript">
$(document).ready(function() {
$('.menu').dropit();
});
</script>
</body>
Another option, instead of putting your jQuery code at the bottom, is to put all your javascript/jquery in a separate file. And then just link to it.
For example
<script type="text/javascript" src="myjsfilename.js"></script>
</body> //again, you put this right before the closing body tag
And then in your myjsfilename.js file, you would have
$(document).ready(function() {
$('.menu').dropit();
});
plus anymore javascript/jquery code you want to add
Doing it that way can help keep things organized
Add a script tag like this to the head or body of your html:
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="path/to/your/jquery/script.js"></script>
as far as best practices go for where to add it, check here for a good discussion:
Where should I put <script> tags in HTML markup?
The first script tag above links to a CDN, and allows you to include jQuery without having to have it locally. This is a great way to do it as long as you dont include many external scripts. Once you have many scripts it would be better to include everything in a local minified file to increase page load performance.
I drew a small diagram to help anyone understand the answers visually.
As a rule of thumb, I recommend putting all scripts at the bottom for performance issues.
It is a best practice, I'd say. So put your code before the </body> closes:
<script type="text/javascript">
$(document).ready(function() {
$('.menu').dropit();
});
</script>
And obviously you need to load your jQuery from a CDN, so put it above all script code.
Yes, that would also need to go before the </body> closes.
The diagram explains it better now. Have a look.

How to reload a picture from a webcam and display it in multiple divs?

I'm using this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval('reloadImages()', 2000); // 2 seconds
});
function reloadImages()
{
$('#picone').attr('src', 'http://www.someserver/pic.jpg?' + Math.random());
}
</script>
<title>Webcam</title>
</head>
<body>
<div id="first">
<img src="pic.jpg" id="picone" border="1" />
<div>
</body>
</html>
How can I copy/clone the picture and display it in a second/third/fourth... whatever div?
If the picture is to remain the same (and I assume it is?) then you don't need to clone it. So if you had two more images such as:
<img src="pic.jpg" id="pictwo" border="1" />
<img src="pic.jpg" id="picthree" border="1" />
Then you can just do:
$('#picone, #pictwo, #picthree').attr('src', 'http://www.someserver/pic.jpg?' + Math.random());
This of course may not be what you want...
I suppose your HTML for second, third, fourth... div structure look like below:
<div id="first">
<img src="pic.jpg" id="picone" border="1" />
</div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
Then you can do like this:
$(document).ready(function(){
$('#second, #third, #fourth').each(function(){
$(this).prevAll("#first").children("img").clone().appendTo($(this));
});
});

How do I add a .click() event to an image?

I have a script that places an image based on a mouse click thanks to Jose Faeti. Now I need help adding a .click() event to the code below so that when a user clicks the image it performs the function shown in the script.
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
I put the entire code below, in case you want to see it.
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
document.getElementById('foo').addEventListener('click', function (e) {
var img = document.createElement('img');
img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e.target.appendChild(img);
});
// -->
</script>
</head>
<body>
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
</body>
</html>
Help?
First of all, this line
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
You're mixing HTML and JavaScript. It doesn't work like that. Get rid of the .click() there.
If you read the JavaScript you've got there, document.getElementById('foo') it's looking for an HTML element with an ID of foo. You don't have one. Give your image that ID:
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
Alternatively, you could throw the JS in a function and put an onclick in your HTML:
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" onclick="myfunction()" />
I suggest you do some reading up on JavaScript and HTML though.
The others are right about needing to move the <img> above the JS click binding too.
You can't bind an event to the element before it exists, so you should do it in the onload event:
<html>
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById('foo').addEventListener('click', function (e) {
var img = document.createElement('img');
img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e.target.appendChild(img);
});
};
</script>
</head>
<body>
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
</body>
</html>
Enclose <img> in <a> tag.
<img src="smiley.gif">
it will open link on same tab, and if you want to open link on new tab then use target="_blank"
<img src="smiley.gif">
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" >
function openOnImageClick()
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var img = document.createElement('img');
img.setAttribute('src', 'tiger.jpg');
img.setAttribute('width', '200');
img.setAttribute('height', '150');
document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images" >
</div>
<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
<img src="Logo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
</body>
</html>

Categories