I want to know how they did this:
http://al-quran.info/#1:1
When you play a verse, the second verse will play after it. It also highlights the text that is "playing". Is there an example I can work with or anything?
So what I want is to click on play at verse A and it automatically plays, highlights and scrolls B,C etc. after that.
How do I do this? I know this is done with Jplayer but I don't know much.
Thank you in advance.
Most of the HTML5 audio players are using HTML5 audio elements. From the javascript point of view you can access bunch of useful methods and properties defined in HTMLMediaElement Interface
just to give you a picture here is some example code with naive algorithm:
var audioElement;
audioElement = document.getElementById('audioElementID');
while(isPlaying()){
if(audioElement.ended){ //Indicates whether the media element has ended playback.
playAndHighlightNext();
}
}
Related
I'm trying to find a way to make a visualiser in javascript so I need to be able to get the audio output level from a youtube video and turn it into some sortof percentage or number. If anybody could help that would be great.
Note: this will only work with the HTML5 player.
You can create an AudioContext object:
context = new AudioContext()
and connect it to the YouTube video element:
src = context.createMediaElementSource($('#movie_player video'))
You can then use a ScriptProcessor to process the playing audio in real-time. The example on the Mozilla documentation page seems to provide a good base you can build on.
Plugin Reference: http://okfoc.us/okvideo/ | https://github.com/okfocus/okvideo
Hey Guys,
I've been trying to get my links to control which video plays with the OKVideo plugin but for some reason it doesn't work. I've tried a myriad of different method with no success.
To activate the plugin, you use:
$(function(){
$.okvideo({
source: 'BHE8Yre3Ex8',
})
});
I've added some links that store the YouTube video ID as an attribute. When the user clicks the link, the video should stop playing the current video and begin playing the next selected one.
Also, I'm not trying to have the video play automatically (on page load)–only on a video selection. I've looked into the code but the options don't seem to work.
I've stripped my code and placed the core of it into jsfiddle, here: http://jsfiddle.net/mikemiketm09/rd4fL/
FYI: It did say you can use YouTube API with the plugin.
Your help would be greatly appreciated.
I have a problem with the .load(); function on my ipad.
$(this).bind('ended',function() {
$('video').load();
});
It's a simply function for loading the same content after the Video ends.
Any idea why this function does not work on an iPad?
The .load() method loads the video into the tag. The .play() method starts the currently loaded video. One more thing to keep in mind is this, is the video the right format? The tag can load quite a few formats but not every browser can handle every format. iOS browser like iPad/iPhone and even Safari on OSX/Windows can play m3u8 playlists encoded with h264/AAC and mp4 encoded with h264/AAC files but will not play webm, vp8 or avi. So you need to keep all of this in mind when building this type of tag. You might want to look into just building the the player with straight Javascript and supplying multiple tags and then let the browser determine the video it can play. (I did this at a past job and it is a lot easier than you might think) And I believe that with certain browsers you need to reset the 'play pointer' and tell it to start at position 0
jsfiddle [dot] net/nexxuz/XuLCC/15/
(will not let be post link without code)
And I was able to get this working playing multiple videos too (once one ended played another) (Ad video plus content video) also I was able to get a mid roll video working too. (at x seconds into video play another video and then once that video is done resume the first video)
I would like to play short sounds in my new JavaScript game.
It is a poker game so the sounds are pretty short (dealt card sound, shuffle deck sound, your turn beep etc.)
I Googled before posting here but all I could see was some MP3 players that actually have "play\stop" buttons, (which are not good for me)
Any ideas?
Put an <audio> element on your page.
Get your audio element and call the play() method:
document.getElementById('yourAudioTag').play();
Check out this example: http://www.storiesinflight.com/html5/audio.html
This site uncovers some of the other cool things you can do such as load(), pause(), and a few other properties of the audio element.
When exactly you want to play this audio element is up to you. Read the text of the button and compare it to "no" if you like.
Alternatively
http://www.schillmania.com/projects/soundmanager2/
SoundManager 2 provides a easy to use API that allows sound to be played in any modern browser, including IE 6+. If the browser doesn't support HTML5, then it gets help from flash. If you want stricly HTML5 and no flash, there's a setting for that, preferFlash=false
It supports 100% Flash-free audio on iPad, iPhone (iOS4) and other HTML5-enabled devices + browsers
Use is as simple as:
<script src="soundmanager2.js"></script>
<script>
// where to find flash SWFs, if needed...
soundManager.url = '/path/to/swf-files/';
soundManager.onready(function() {
soundManager.createSound({
id: 'mySound',
url: '/path/to/an.mp3'
});
// ...and play it
soundManager.play('mySound');
});
Here's a demo of it in action: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/
One Word. SoundManager2
I believe the common way is to make an invisible flash applet (as "sound library") and trigger it to play the sounds appropriately.
edit: condensed question:
How can I create a flash-free continuous music player (one that is uninterrupted as the user navigates the site)
So I want to set up a website with an audio player that behaves in much the same way as that of many flash players on sites such as hypem.com and pitchfork.com, however I want to avoid Flash altogether if possible so I can retain compatibility with Apple mobile devices.
(edit: mind you i am not creating something mobile-specific! just a webpage with an audio-player feature that can be used on an Ipad/Iphone/Ipodtouch)
I've been looking everywhere for info and so far some people have thrown around that Javascript might provide a solution, but all the players I've found use Javascript AND Flash and do not address the continuous play issue.
Take a look at the html5 <audio> tag.
http://www.catswhocode.com/blog/mastering-the-html5-audio-property
Try and keep your SO questions specific. Ask your site layout question in another question.
https://stackoverflow.com/faq
Here is some code that should get you on the right track
First the html audio element supported by all the browsers but in the IE family only IE9
<audio id="test" controls="controls" type="audio/ogg">Your browser doesn't support the audio tag.</audio>
Then the javascript
window.onload=function(){
var pre='';
var arr=['songTitle1','songTitle2','songTitle3'];
var ind=0;
var ele=document.getElementById('test');
ele.src=(ind++)+'.ogg';
ele.play();
//when the song ends start a new one
ele.onended=function(){
ele.src=(ind++)+'.ogg';
//if you are done with all the songs loop back to the beginning.
//Or you could add some code to load more songs from the server
ind=ind==arr.length?0:ind;
ele.play();
}
}
This just takes an array of song titles and plays through them assuming that you have the ogg files in the same directory as the html file. Right now I think ogg is the only format that you can play on all browsers.