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
Related
I'm supposed to have 5 animal images on the site, and whenever I hover over an animal, their characteristic sound plays. Is there a more efficient way to do this rather than using switch case?
This is what I have so far (works only for 1 animal):
HTML:
<img src="img/piggy.png" onmouseover="F1(this)">
JS:
function F1(img) {
var audio = document.getElementById("audio");
audio.play();
}
I think this is a really solid base. If it were me I would do almost exactly what you are doing but set up an array with the list of available sound bites. Then, onmouseover pass in a number (0-5) and use that as the selector to choose which soundbyte plays.
var sounds = ["sound1", "sound2", "sound3", "sound4", "sound5"];
function playAudio(track) {
audio.play(sounds[track]);
}
Hopefully that's clear/helpful. Otherwise, let me know and I'll be glad to clarify.
You can have the sound to play embedded in the img tag's dataset :
<img src="img/piggy.png" data-sound='piggy.wav' onmouseover="playSound(this)">
function playSound(element) {
var audio = new Audio(element.dataset.sound);
audio.play();
}
you may want to pre-load all of the audio files on page load
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!
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()
I am working on a project based on jquery animation its animation works fine on desktop (Firefox,chrome,opera,IE) also support HTML 5 audio tag but in Ipad/iphone/ Android safari audio tag doesn’t support.Its works fine on Ipad/iphone/ Android firefox.i have searched it in many forum don’t get desire Result. I have used this function :
function playmusic(file1,file2)
{
document.getElementById('music11').innerHTML='<audio id="music1"><source src="'+file1+'" type="audio/ogg"><source src="'+file2+'" type="audio/mpeg"></audio>';
$("#music1").get(0).play();
}
I have called function like : playmusic(2.ogg','2.mp3');
If I give autoplay in audio tag it works but play method not working and I have to use play method as in my application needs sound in particular event see the link
http://solutions.hariomtech.com/jarmies/
I have also changed my function and give direct audio tag in div and call function the same problem I face as I mentioned above. I need sound play in background without any click.if I use auto play method so it play sound only one time but I need sound multiple time on event.
Try to add an autoplay attribute on the audio tag:
function playmusic(file1, file2) {
document.getElementById('music11').innerHTML='<audio autoplay id="music1"><source src="'+file1+'" type="audio/ogg"><source src="'+file2+'" type="audio/mpeg"></audio>';
}
I would however recommend building a proper element and insert that into the DOM - something like this:
function playmusic(file1, file2) {
var audio = document.createElement('audio');
audio.preload = 'auto';
audio.autoplay = true;
if (audio.canPlayType('audio/ogg')) {
audio.src = file1;
}
else if (audio.canPlayType('audio/mpg')) {
audio.src = file2;
}
document.getElementById('music11').appendChild(audio);
}
I'm trying to use jQuery to control an HTML5 audio element, but I'm no genius with JS.
What I want is for the player to start on page load, which I've done, but when the play button is clicked, I want to check whether or not the audio is playing.
If it's playing when clicked: Stop the audio.
If it's not playing when clicked: Play the audio.
If you could help, it'd be much appreciated.
Source here: http://www.julake.co.uk/media/loader.php?page=contact
Many thanks,
you should use a single play/pause toggle button in which you need to check if your audio is paused or not
var audioplayer = document.getElementById("audio-player");
$("#play-bt").click(function(){
if (audioplayer.paused) {
audioplayer.play();
}
else {
audioplayer.pause();
}
$(this).toggleClass('pause'); /* style your toggle button according to
the current state */
})
var audio = new Audio("http://www.w3schools.com/html5/song.ogg"); //or you can get it with getelementbyid
audio.addEventListener('canplay', function() {
//code, when audio can play
audio.play(); //this function will start the music
})
with audio.play() function you can start it. You don't need JQuery
If you wish to use a jquery selector or have a jquery selector already, you can add [0] to get the native dom element.
So an example that actually uses jquery would be.
$('audio')[0].pause()