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!
Related
I may need a little favor for my project
I'm trying to create a play button based on a gif image.
How to make it so the gif would function as a play function javascript?
I'd also want to make it so when I click the gif image it would start playing the animation instead of the gif auto play.
You can just simply
use the css & javascripts below, however you need to use two different type of pictures, first one would be the gif image, and the other one are a regular img type e.g jpeg or png file.:
And if you don't know already if you're using chrome browser, simply right click on your project page then just click inspect, then choose inspect elements, drag it to the element so you would be able to get the specific css id.
<style>
#u11246{
visibility: hidden;
}
</style>
And try this javascript as the follow:
<script>
function play(){
var audio = document.getElementById("audio");
audio.play();
document.getElementById("u11236").style.visibility = "hidden";
document.getElementById("u11246").style.visibility = "inherit";
}
function stop(){
var audio = document.getElementById("audio");
audio.pause();
document.getElementById("u11236").style.visibility = "inherit";
document.getElementById("u11246").style.visibility = "hidden";
}
</script>
And use the following code for the audio.
<audio id="audio" src="http://m4a-64.cdn107.com/01/65/45/0165451642.m4a" ></audio>
Good luck!
You could use the following code snippet, to make a custom play button/element:
<button id='playVid'>Play</button>
document.getElementById('playVid').onclick = function (){
document.getElementById('video').play();
};
Check out this info on w3schools.com: https://www.w3schools.com/tags/av_met_play.asp
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.
This is probably an odd question, but for fun i recreated the Spotify layout to their app in codepen, now I want to add some functionality, is there a way I can get music to play using JS or jQuery?
My first thought was to embed the video and hide it behind the play button, but that doesn't quite work for me.
Is there a way I can set a var where I set it = to a url, then use an onclick or toggle command to play the url?
The only way I could think about going this would be:
var expirePrettyLow = 'url:www.fake.com'
$('#play').toggle(
function(){
//play youtube link?
);
I hope this makes sense, is there an api I can call to just get the mp3s? I don't want to upload them since it's just linking, not trying to make a product out of this, just to add to portfolio.
For reference here is my codepen link.
Thanks for whatever advice/direction you can give me!
EDIT: To clarify, by 'linked' and not 'loaded'
I would like to accomplish this by linking to a url (ie: href="") as opposed to saving it in my directory and loading it through a filepath (ie: music/tracks/expire-prettylow.mp3)
User a blank audio tag and set the play button's onClick to "var newSrc = newSource.com/song.mp3; playTrack()", and have the playTrack() function load and play the song. Here's an example of a code that changes the source of the audio element then plays the new source.
<script>
function playTrack(){
var music = document.getElementById("myAudio");
music.src = newSrc;
music.load();
music.play();
}
</script>
<audio id="myAudio" src="">
Audio tag not supported
</audio>
Click a song to play it:
<ul>
<li onClick="newSrc = 'http://fidelak.free.fr/reprises/The%20Doors%20-%20People%20are%20Strange.mp3'; playTrack()">People are Strange</li>
<li onClick="newSrc = 'http://mp3light.net/assets/songs/14000-14999/14781-december-1963-oh-what-a-night-four-seasons--1411568407.mp3'; playTrack()">Oh What a Night</li>
</ul>
Set the src with JavScript, music.load(), then music.play()
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.
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">