This is a simple query but somehow i can't seem to put a finger to what seems to be going wrong.
I have two buttons namely 'problem' and 'need'. On clicking the former, the audio file 1 needs to be played, similarly when later is clicked the audio file 1 should stop and audio file 2 is played. The code which i have written for the same is this:
var playing = false;
$("#problem").click(function(event) {
$("#audio").html('');
$("#audio").html('<source src="audio/expertise/file1.mp3" type="audio/mp3"><source src="audio/expertise/file1.wav" type="audio/x-wav"><source src="audio/expertise/file1.ogg" type="audio/ogg">');
playing = true;
});
$('.need_btn').attr('id', 'need_btn');
$("#need_btn").click(function(event) {
if (playing == true) {
$("#audio").trigger('pause');
playing = false;
if (playing == false){
$("#audio").attr('src','<source src="audio/expertise/file2.mp3" type="audio/mp3"><source src="audio/expertise/file2.wav" type="audio/x-wav"><source src="audio/expertise/file2.ogg" type="audio/ogg">');
$("#audio").trigger('play');
playing = true;
};
}
else{
/*$("#audio").trigger('play');*/
};
});
this works fine for playing file 1 , pause file 1 when second button is clicked but does not play file 2.
What can i change to make it work?
I think the problem in your case is this piece of code:
$("#audio").attr('src','<source src="audio/expertise/file2.mp3" type="audio/mp3"><source src="audio/expertise/file2.wav" type="audio/x-wav"><source src="audio/expertise/file2.ogg" type="audio/ogg">');
I just went through the official documentation and it seems like you are using the .attr in an incorrect way. I haven't tried the code I'm going to post, but assuming you do want to set the attributes of the source element, you might want to try something on these lines:
$( "source" ).attr({
src: "audio/expertise/file2.mp3",
type: "audio/mp3"
});
Now I understand you have the .ogg , .wav and the .mp3 versions. So I think it's also possible you directly set the html for the element with id "audio" like you did with file1. I'm suggesting something like this:
$("#audio").html('<source src="audio/expertise/file2.mp3" type="audio/mp3"><source src="audio/expertise/file2.wav" type="audio/x-wav"><source src="audio/expertise/file2.ogg" type="audio/ogg">');
This would set the html for the corresponding element with the required markup. I hope this gets you started in the right direction.
Related
Is there a way we can play audio sound or Gif image on Google AppMaker? I have tried the following to play .sound that I kept as HTML containing the .mp3 file src I copied from the Resources.
var page = app.pages.RateToilet;
var x = page.descendants.sound;
function playAudio() {
x.play();
}
I got the following error
x.play is not a function
at playAudio (client:24:7)
at RateToilet.Image7.onClick:5:3
Please advise .. Thanks :)
To play a .gif file is pretty straight forward. After you've uploaded the file to the resources section of appmaker, you simply need to drag and drop as shown below.
Now, to play a sound you've saved inside the resources, please do the following:
1) Add a button widget and set its text property to "play sound".
2) Add the following code to the onClick event of the button widget:
var track = "";
var audio = document.getElementById("audio");
audio.setAttribute("src", track);
if(widget.text === "play sound") {
widget.text = "stop sound";
audio.play();
} else {
widget.text = "play sound";
audio.pause();
audio.currentTime = 0;
}
3) Add an HTML widget below the button widget.
4) Make sure to check the allowUnsafeHtml checkbox
5) Put the following inside the HTML widget html value:
<audio id="audio"></audio>
6) Next, go to the html display section and make sure to uncheck visible and set visibility type to hidden, just as shown below
7) Finally, go to the resources section of appmaker, copy the resource URL and paste its value inside the onClick event of the button widget, so that var track equals to that value. See below:
I built this little demo app for you hoping it could help you.
You can download from here. I hope it helps!
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
};
So i'm trying to use two play buttons in my audio player, this is because i have one in audio player and other in sidebar for example.
Follows my jsfiddle: http://jsfiddle.net/LqM9D/5/
Someone can help?
Obs: i'm using html5 audio and jquery/js on my player
You're re-using the same ID twice. IDs must be unique. Correct that and it works fine. And since you're using jQuery, you could use:
window.player = $('#player')[0];
$('#playpause, #playpause2').click(function () {
if (player.paused) {
player.play();
this.innerHTML = 'pause';
} else {
player.pause();
this.innerHTML = 'play';
}
})
jsFiddle example
Use a common class on your buttons, instead of ids. IDs need to be unique. Then set jQuery click method. Updated
i have a similar question. I would like to list multiple play buttons and be able to use a listenEvent to trigger play and pause for each. However I can't seem to wrap my head around it. It works fine when I code the first button but when I try to introduce a second player it breaks.
I wish to keep my audio tags as html and call them in the js.
Here is a link so it's more understandable
https://codepen.io/my-mosas/pen/WNzvoGY 0123
I've got a page with links to MP3s, when the link is clicked I use javascript to show a small Flash player (NiftyPlayer) under the link. When a different link is clicked, the old player is hidden and the new player is revealed.
The player auto-starts when the element is shown, and auto-stops when hidden - in Firefox.
In IE it will only auto-start and NOT auto-stop. This is what I would like to solve.
This is an example HTML with link and player
Misunderstood What You Said
<div id="player662431" class="playerhide"><embed src="http://www.example.com/shop/flash/player.swf?file=/mp3/Beat The Radar - Misunderstood What You Said.mp3&as=1" quality="high" bgcolor="#000000" width="161" height="13" name="niftyPlayer662431" align="" type="application/x-shockwave-flash" swLiveConnect="true" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
Here is the javascript (I've got jQuery installed to let me hide all the open players on this page apart from the new one)
function toggle_visibility(id) {
$('.playerhide').hide();
var e = document.getElementById(id);
e.style.display = 'block';
}
I think what I need to do is start the player manually with javascript (rather than using the autostart as=1 function in the URL string)
There is some javascript that comes with NiftyPlayer to allow this EG
niftyplayer('niftyPlayer1').play()
there is also a stop method.
I need some help with javascript - how do I add this call to play into my toggle_visibility function (it has the same unique ID number added to the name of the player as the ID of the div that's being shown, but I don't know how to pull this ID number out of one thing and put it in another)
I also would like to be able to do
niftyplayer('niftyPlayer1').stop()
to stop the audio of the previously running player. Is it possible to store the current ID number somewhere and call it back when needed?
Thanks for the help, i'm a PHP programmer who needs some support with Javascript - I know what I want to achieve, just don't know the commands to do it!
Thanks
If you assigned each niftyplayer object a classname, f.x. ".players", then you could loop through each player, like this:
function toggle_visibility(id) {
$(".players").each(function(){
playerId = $(this).attr('id');
if(niftyplayer(playerId).getState() == 'playing') {
//Stop the currently playing player
niftyplayer(playerId).stop();
//Hide the div that was playing
$("#" + playerId).hide();
}
});
//Start the new player
niftyplayer(id).play();
$("#" + id).show();
}
So what this actually does, is it loops through all the players on the website. It checks if the status of each player is equal to "playing", if it is, then it stops it and hides the div tags. Then it starts the new player and shows that div tag.
I think this does it. Try it out.
I have a much better solution after I noticed a very nasty bug / 'feature' when using Internet Explorer in conjunction.
I had noticed that in IE the pages were taking a very long time to load when I had a lot of hidden Nifty Players, I looked closer using Fiddler and found that each instance of NiftyPlayer was preloading the MP3 in full, rather than loading on demand as with Firefox and Chrome etc.
This meant that a page with 100 items (each item having up to 4 MP3s) took several minutes to load at times with obvious data transfer implications.
My solution which is rather simpler (but maybe clunkier) than Indyber's is to just use
function toggle_visibility(id,mp3location) {
// hide all players
$(".playerarea").html('');
// show clicked player
$('#' + id).html('<embed src=\"http://www.xxx.com/shop/flash/player.swf?file=http://www.xxx.com/mp3/' + decodeURIComponent(mp3location) + '.mp3&as=1\" quality=high bgcolor=#000000 WMODE=transparent width=\"161\" height=\"13\" align=\"\" type=\"application/x-shockwave-flash\" swLiveConnect=\"true\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" class=\"playerNew\">');
}
which works fine with IE, and also solves the problem of not being able to stop the players from playing in IE