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.
Related
I'm looking for a super simple plugin or flash file for audio to fallback from HTML5 <audio> tag with.
I want to be able to connect this to my own element rather than have an existing interface/player. Super leight weight with the only functionality being stop() and play(). Or even easier a play that automatically calls stop first then replays.
Also would be nice to have a dynamic swf for fallback so I don't have to load multiple copies of it on the same page and can just load it once and feed in a file path for it to play.
A jQuery or JS plugin would be great or if anyone has a link to just a swf file that would be awesome and I can just create my own plugin for that.
I've used Flowplayer for quite a while now. Its API allows us to control the player easily through Javascript.
http://flowplayer.org/
If you're looking for something even simpler, take a look at Dewplayer. Never used it, but seems nice and simple enough.
http://www.alsacreations.fr/dewplayer-en.html
I'd recommend SoundJS, which I've helped develop. It allows you to write a single code base that works anywhere, and gracefully uses Web Audio, html audio tags, or flash as appropriate.
Hope that helps.
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 :)
I am trying to add a player that will play audio on the site. It will play music randomly and display only play/pause? are there any good javascript or jquery plugin/api?
What is the best way to display a single music filefrom a list of files on a flyout on hover? it will have the option to display filename and download option.
Any examples would be much appreciated.
Thanks
I'm not sure of any preexisting libraries that handle this, but it wouldn't be hard to accomplish with HTML5's <audio> tag. You can control it using the play() and pause() methods. Check out HTMLMediaElement on MDC for how to interact with the element.
You could use JQueryUI to create some sort of a dialogue for presentation.
I am trying to insert PowerPoint slides into HTML preserving links in the PowerPoint slide. I was just wondering if any of you knew a good method to maybe exporting a PowerPoint slide to an HTML and then displaying it in a div on your page, with a link to say do a JavaScript function on that same page.
I've never used it, but PPT2HTML might help. There's also this blog that describes how to save your presentation for the web then modify it.
This isn't exactly what you're after, but there are some html-based presentation tools like S5, DOMSlides you might want to consider as they wouldn't suffer from being translated.
You can use the jQuery plugin called PPTXjs.
This plugin convert pptx to html using javascript only (no server side code needed).
It is based on PPTX2HTML but support a lot more shapes, media (audio, video) and more.
Using:
$("#result").pptxToHtml({
pptxFileUrl: "path/to/slide.pptx"
});
For more details : https://github.com/meshesha/PPTXjs.
1)u can convert it to flash swf
2)convert all slides to an image file and then add 2 buttons(Back,Next) with calling the next and previous images based on an integer variable and this buttons will show u the previous and next slides :)
sorry but u cant embed it without copying all the Powerpoint-exported HTML code in your div tag
Though not quite what you asked, Google Docs or Slideshare both let you embed Powerpoint as flash - perhaps that would be a more elegant way to do this. That is, if embedding is the aim!
I remember there was a function in PowerPoint to export it to an HTML, I would do that and then have it in the page using an <iframe> and then put that inside a <div>
I'm wondering if anyone has ever come across a plug-in for mootools that will show a hidden div (with embedded video in it) as a light box, upon a click on a link.
What I wanted is somehow like how apple trailers site show the embedded quicktime player.
Give Shadowbox.js a try... It supports multiple frameworks (MooTools, jQuery etc.), multiple players (img, iframe, html) and a lot of other options.
You can also check this matrix to see an overview of popular Lightbox clones with their capabilities.
Clientcide has one that might work. You could also try Milkbox.
You could also try moodalbox - not sure how it compares with milkbox, which I haven't used, but moodalbox should be able to do it: http://www.e-magine.ro/web-dev-and-design/36/moodalbox/