I happily use Reveal.js for presentation purposes, but now I want to create MOOCS using the fine script. I want to put an audio clip with each fragment, that starts playing when the fragment is shown. So far that works fine using the eventListener method to start and pause audio in my slideshow. However, given the nature of this method, the audio or video will continue when the next fragment is shown, as it is dependent on the status of 'fragmentshown' or 'fragmenthidden'. (see below)
Reveal.addEventListener( 'fragmentshown', function( event ) {
var audio = event.fragment.querySelector( 'audio' );
if( audio ) {
audio.play();
}});
Reveal.addEventListener( 'fragmenthidden', function( event ) {
var audio = event.fragment.querySelector( 'audio' );
if( audio ) {
audio.pause();
}});
Is there an easy way to extend this using the 'current-fragment' class that's added to the fragment that is current (duh), to pause (or better yet: stop) the audio when the class is passed on to the next fragment? I'm sure there is, but I'm a novice and would really appreciate a heads up here. It would be great for moocing purposes if this would be part of the code. I get lots of requests for it from teaching colleagues at our university.
To generate a MOOC you can use the audio-slideshow plugin that does the job for you. The plugin allows you to specify an audio file for each slide and fragment. Alternatively, it automatically checks if there is an audio file for the slide and fragment based on the reveal.js indices, e.g. for the second horizontal and first vertical slide ist checks whether there is a file audio/1.0.ogg.
You can also record the audio while presenting using the slideshow-recorder plugin or use text-to-speech.
You can find a demo here and the plugin here
Asvin
Related
I have a lecture on YouTube that I would like to use as the header movie for my twentyseventeen child themed website. I would like it with sound and without autoplay (As viewed on YouTube, the video has sound intact).
Following another question about autoplay, I set a video URL of https://www.youtube.com/watch?v=1dYAYBNU6qM&autoplay=0. The behavior does not appear to have changed. It starts immediately, but sound is muted.
How, with twentyseventeen, do I have an option of a media file that starts paused, and begins to play, with sound, if the user hits the 'Play' button?
You can use global object wp for get access to youtube player functions. Youtube video in twentyseventeen theme loads wp-custom-header.js file and creating new object in 384 line.
Here is some solution you can use:
var ww_timer = setTimeout(function ww_video() {
if(wp.customHeader.handlers.youtube.player == null){
ww_timer = setTimeout(ww_video, 50);
}else {
if(typeof wp.customHeader.handlers.youtube.player.unMute === "function") {
wp.customHeader.handlers.youtube.player.unMute();
wp.customHeader.handlers.youtube.player.stopVideo();
}else{
ww_timer = setTimeout(ww_video, 50);
}
}
}, 50);
This code goes to my_js.js file( I created it in the main directory of active child theme. You can add this code to another .js, if you have it ) of your active child theme. Also, we need to update functions.php file using this code:
function ww_youtube_functions(){
wp_enqueue_script('ww_youtube_video',get_stylesheet_directory_uri().'/my_js.js',array('wp-custom-header'),false, true);
}
add_action('wp_enqueue_scripts', 'ww_youtube_functions');
Required part of this code is array('wp-custom-header'): enqueue script with dependence with script wp-custom-header.
setTimeout is not best way. I believe, that it can be done with more elegant code.
But its tested and working.
I'm trying to use this slider: http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/ but want to play a different audio file, each time the slide loads.
The way I imagine it working, is for the user to click play on the first slide, the audio to finish playing, then for the slide to change and it automatically plays the next audio file and so it continues until all slides are played through.
I've gotten it to the point where the slider changes when the audio has stopped, but cannot figure out how to play the next audio file, one after the other.
I'm very new to jQuery and am struggling a lot. Any help would really be appreciated!
Here is my work in progress: http://dailycrow.me/actualsite/
Thank you.
What I would do is to handle the audio playing with an scripting language such as PHP and call the needed method with parameters with Javascript or JQuery.
You can embed HTML with PHP so the audio can be played. Something like this:
$audioFile = "wishedAudioFile.mp3";
echo '<embed src="'.$audioFile.'" hudden="true" autostart="true"></embed>';
you can maintain an array of sources, where each index refers to a slide index, and from looking at this doc, you can use the onAfterChange event, code would be something like:
var audio = new Audio(), audSrcList = [
'slide1.wav',
'slide2.wav',
'slide3.wav',
'slide4.wav'
...
];
function afterSlideChange(slide, index){
audio.src = audSrcList[index];
audio.play();
};
...
$.Slitslider.defaults = {
...
// callbacks
onBeforeChange : function( slide, idx ) { return false; },
onAfterChange : afterSlideChange //CHANGED here
};
I have a HTML page with an image in it.
When I roll-over the image with my mouse it plays an audio file.
I have 4 different audio files, and each time I roll-over the image I need it to play the next audio-file in the sequence.
I've got it playing one audio-file back ok, but how do I get it calling the next audio-file in the queue?
Its likely you just need to make a javascript function on the webpage to handle this. Without seeing your codes I can't really give you a good example. Here is what I would do. Within a a script tag or head javascript:
var current = 0;
var musicList = ["file1.wav", "file2.wav" , ...];
function playSound()
{
// Code to play audio file
// you don't need to bother with <audio> elements.
// HTML 5 lets you access audio API directly
// buffers automatically when created
var snd = new Audio(musicList[current]);
snd.play();
// code to increment and current counter (depending on musicList size)
current++;
current = current % musicList.length;
}
Within your HTML, you can just rely on javascript to do the work by using the onmouseover or onmouseout tag.
<img onmouseover="playSound();" src="smiley.gif" alt="Smiley">
I'm working on a mobile device running iOS.
I have a DIRECT download link to an audio file (when I open it on desktop the download starts immediately). I try this but it plays only one time.
<script>var audio = new Audio("'+downloadUrl+'");</script> <button onclick="audio.play();">Play</button>
I also try to catch it with an <iframe> but it plays only one time.
When I use <audio> ,"streaming" appears and I have the same problem :
I think it's because my file is not saved on my phone. So how can I fix it, so that it plays as required.
Thanks in advance,
Let's take a look at the HTMLMediaElement DOM interface and Media Events
var audio = new Audio(downloadUrl);
audio.addEventListener('ended', function () {
audio.currentTime = 0; // seek to position 0 when ended playing
/* // alternatively, not sure about compatibility
audio.fastSeek(0);
*/
});
If you wanted it to loop rather than be playable again, set loop to true instead.
Actually this the first time I'm gonna use jplayer plugin, so all I need is to play a sound clip (2 sec) when I click on a div, and I don't know how to use jplayer!
I also need to load the sound clip file in cache as well as the page is loading, so when I click that div the sound clip plays immediately without loading it when clicking
btw, is it possible to do that without using jplayer, jquery maybe?!
If you want to stick with jPlayer, try setting warningAlerts and errorAlerts to true.
$(id).jPlayer( { warningAlerts: true, errorAlerts: true } );
This may solve your problem.
But as long as you only need sound (no video), SoundManager 2 might be a better fit for you. Its really robust and provides extensive debugging output.
soundManager.url = './swf/'; // directory where SM2 .SWFs live
var mySound;
soundManager.onready(function() {
// SM2 has loaded - now you can create and play sounds!
mySound = soundManager.createSound({
id: 'someSound',
url: '/path/to/some.mp3'
});
});
//....
//if(xhr-stuff)
if(mySound)
mySound.play();
Use soundmanager2.js for testing and soundmanager2-nodebug-jsmin.js for production. If you have further questions, don't hesistate to ask.
-snip-
scratch that... there's an api
http://www.jplayer.org/latest/developer-guide/#jPlayer-play
Use
$("#jpId").jPlayer("play");