I'm currently working through a tutorial on how to make a sound board in HTML5 provided here.
The current piece of code I've been having trouble with is this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("audio").removeAttr("controls").each(function(i, audioElement) {
var audio = $(this);
var that = this; //closure to keep reference to current audio tag
$("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() {
if(that.play()==true){
play.stop();
}else{
that.play();
}
}));
});
});
</script>
I'm trying to make it so that only one sound can play at once. I also tried to make a plain stop button by calling that.stop() but it doesn't work. I am also trying to figure out how to make separate arrays so I can organize the sounds. I tried changing the audio tag as in the tutorial talks about how it creates the array searching for that. But I must be changing the wrong line of code as the new array never works.
To only allow one sound to play at once, I would listen to the DOM media events.
There are several events that would help you. Such as:
ended
pause
play
playing
If you listen to these, and keep a global flag to tell you if media is playing, you can prevent your other buttons/links from playing a sound, by checking this flag first.
EDITED FOR COMMENT:
Pretty much all of the code you need is JavaScript, not PHP. Have a look at this sample fiddle.
http://jsfiddle.net/B82Nq/11/
It registers a generic media event listener to the 3 <audio> tags, and separate pause, ended and playing event handlers to control playback. When you are sent a stop/start event, a global boolean variable is toggled that tells you whether you should allow another clip to play (I assume you will simply disable the buttons that play them, or something similar).
But I've added all media events to show you them all firing anyway - it will help understanding when and how often they are fired. They are listed at MDC here:
(no apology made for using an AC/DC clip :)
Related
I have an audio tag, and three audio streaming sources.
Currently I have a button for each source, and I change the src using JS, however, I would like to have it so I can change the audio src using the keyboard multimedia keys, the MediaTrackPrevious and MediaTrackNext keys.
Adding a keydown event listener to the document is not helpful, because I want it to work even when the browser is minimized \ I am on a different tab.
By default the Pause\Play multimedia key is working, Is there a way to also make the Previous \ Next keys work?
Thank you.
I also have a similar problem which was solved by using media session API.
here is the link
edit: This is the best post I've found in media session api and it is as easy as copy paste.
I can't make comments yet so writing it as an answer.
Can any one help me out to create JavaScript with html to run videos of all types and format including You tube, flash, Instagram, VUClip.
I also want to know current state of video like - buffering, start, stop, pause, completed, repeating etc.
I have tried with , etc.
Thanks
Try some existing solutions, for example video.js it's very useful and will allow you to achieve your goals, I hope.
I am creating small little animations using pure CSS similar to those in codepen.io
At the moment, those animations have their own html/css. I would love to chain them together to create a seamless cinematic experiment.
What will be the best way to chain them together and trigger a package(CSS/HTML) after the other?
eg:
Once animation A (lorem.css/lorem.html) is finished, it will trigger animation B which is (ipsum.css/ipsum.html)
I would love to keep them separated for ease of management.
I am wondering whether we could use Handlebars.js for this? Since the differences between each HTML file is the body tag. So can I just template the body tag of each HTML file and then swap it out to the next body block when the current animation has ended?
Thanks.
You could listen to ontransitionend event of css3 animations with javascript. Then apply the new animation class to the element.
just for sake of smoothness , you can load all the html in different layers . and stack them on top of each other z-index,hide ones that are not needed to be shown , once you want to show any layer with the html , and attach the css , use .show() and append the css file to your current html file using <link href="your css file URL" rel="stylesheet" type="text/css" /> , i think this will work very smoothly.
yes there is ontransitionend event fired on the element that is animating and this also has vendor prefixed events for webkit and opera. You then can see what animation this event corresponds to by looking at
event.originalEvent.propertyName
U should use some JS for this, and the good thing is ;) U don't need jquery for this.
u can just listen to (eventlistener): (don't mind the notation, just copied it from my own manager)
'WebkitTransition':'webkitTransitionEnd',
'MozTransition':'transitionend',
'OTransition':'oTransitionEnd otransitionend',
'msTransition':'MSTransitionEnd',
'transition':'transitionend'
depending on the browser, same goes for animationend
element.addEventListener("transitionend", function(){
//do whatever
},false);
or create some function to detect the browser automaticly, create a variable for it, and add that to the even listener. ( i recommend , modernizr way of doing this)
This way u can just create a cssclass, containing the animation properties, and add it to the element, when the animation /transition is completed it triggers and ending.
So the idea, would be to create some kind function/manager that removes the class at ending, and adds the next one to the same element, or next element after that.
sidenote: when u do something like add padding for some reason (padding-top/padding-left) within or animation, (its just an example) it will detect 2 endings and not just one for adding "padding" (atleast thats what chrome does, forgot what browser version though, u have to play with it a bit)
please take a look at my answer over here for a full explanation
CSS3 Chain Animations
I'm trying to create own player for html5 audio by javascript.I've got the play,pause and volume option of htm5 audio player like:
<audio id="playe" src="song.ogg"></audio>
<div>
<button onclick="document.getElementById('playe').play()">Play</button>
<button onclick="document.getElementById('playe').pause()">Pause</button>
<button onclick="document.getElementById('playe').volume += 0.1">Vol+ </button>
<button onclick="document.getElementById('playe').volume -= 0.1">Vol- </button>
<button onclick="if(document.getElementById('playe').volume == 0){document.getElementById('playe').volume += 1.0;}else{document.getElementById('playe').volume = 0;}">Mute</button>
</div>
but how can I show the timeline there ? and is that the correct way for 'mute' option that I applied ?
-Thanks.
I assume you already know about the controls attribute and are choosing to create your own player? (View on JSFiddle)
If that's the case, read on...
How can I show the timeline?
I can think of two possible elements that would be ideal to use (on semantic grounds). The first would be the <input type="range"> element. View it here. You could target the element and set the values of the attributes using the currentTime and duration properties of the DOM element in Javascript.
The 5.1 specs say that this element comes 'with the caveat that the exact value is not important'. This probably isn't true for a video timeline, right? We definitely want our users to know the exact value. Nevertheless, that phrase in the specs give an explanation for why there's no ability to display the associated number of the element.
But we can, of course, display the time in a separate element, sort of like how Youtube doesn't display the time over the slider (unless you're hovering it). For this, we should use the output element. It's meant to be used 'for the result of a calculation', and, implicitly, the result of the calculation of another Html element. This is why it has the for attribute; it 'binds' it to the value of another element. In this case, we'd make the for our identifier of the range input.
For a little example of what I just wrote, I suggest you check out Chris Coyier's implementation of this idea. In summary, the Html he uses looks like:
<input type="range" name="foo">
<output for="foo" onforminput="value = foo.valueAsNumber;"></output>
and then he just styles the output with css to look nice. Nifty, huh?
Random note: It happens that the DOM element of the audio element is a child of the HTMLMediaElement, and over at the MDN you'll find a good list of all of the properties and methods of these things. This will surely be useful in building your own audio player. The HTMLAudioElement itself doesn't add much to its parent.
The problem with the range input is that it's an Html widget that most definitely utilizes the Shadow DOM, so styling it is pretty difficult right now (in fact, impossible in every browser except maybe Chrome).
If you really need to style the appearance of the range input, the most control you'll get is by using a Javascript widget that mimics the behavior. You know, throwing a bunch of Html elements together such that they look like a range input, and then wiring functionality into it with Js.
& if this thing is for personal use or a team using Chrome or Safari, you could make this a Web Component, which would be the best, and most future-proof way to go about this. But the Shadow DOM is still poorly supported.
Is that the correct way to mute?
HTMLMediaElements don't have a mute method, so, yes, you'll need to write a little bit of script like that to do it.
I'd probably change how your script works, though. I think users are used to the volume 'saving' when they mute, then returning to that value when they unmute. Right now, your script doesn't have this behavior. I'd definitely add that in!
Other thoughts...
Inline Javascript is generally frowned upon. Why not move everything into an external file, or at least a script tag, so that it's more manageable? You could even write a plugin to make it all modular and stuff.
I'm making a site that uses JavaScript, jQuery, and jPlayer to make an audio playlist. I am still slowly teaching myself JavaScript, so I am a bit confused.
I have a link element on the jPlayer that I want to let the user click and have it load the corresponding post on my music blog. My jPlayer and jQuery code that I included are both written in shorthand so I can't decipher what is actually going on.
The element that I want to change is written as a.jp-playlist-item. Is there an easy way in JavaScript to add an onclick function that will override the default one that jPlayer has set up so I can open a new tab and redirect them to a site?
If you want to look at my site, it's http://www.startingtofeelit.com and the link I'm trying to make is on the top music player.
You should use preventDefault
$(".yourClass").click(function(event) {
event.preventDefault();
// DO SOME STUFF
});
I am sorry for the misunderstanding...
The JQuery selector, was not correct in my last answer.
Just do this:
$(".jp-seek-bar").replaceWith($(".jp-seek-bar").clone())
$(".jp-seek-bar").click(function(){
alert(1);
/*WRITE YOU CODE HERE*/
});
Hope it helps