I have to play a song in browses including Android and iPhone. I did it using the html5 audio player. But playbackrate is not working in Mobile Browsers. Is there any library or plugin available for this? Is web-audio API supports this feature?
In this site playback rate is working in mobiles too. But unable to find which method they are following?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<audio src="./audio/Kalimba.mp3" id="audio1" controls>Canvas not supported</audio>
<button id="playbutton" >Play</button>
</body>
<script type="text/javascript" >
$(document).ready(function (e) {
$('#playbutton').click(function () {
var audioElm = document.getElementById("audio1");
var playBackSpeed = 0.5;
audioElm = document.getElementById("audio1");
audioElm.playbackRate = playBackSpeed; // default speed 1
audioElm.play();
});
});
</script>
</html>
The site you're linking to uses Web Audio, but it doesn't use playbackrate to change the tempo of the song. Instead it schedules each note separately, so when you change the tempo, what you're really doing is change the BPM at which notes are scheduled. You can think of it as changing this:
setTimeout(schedule, 1000);
to:
setTimeout(schedule, 500);
when you go from 60 BPM to 120 BPM.
There is, however, a similar thing is Web Audio as what you're doing with the audio element. The AudioBufferSourceNode, which you use to play a pre recorded sample, has a property called playbackRate. This changes the rate of the audio (but doesn't do pitch correction!). Check it out at https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode
There are no any external Plugin or API which is required to play audio in Browser, this is one of the advantages of using HTML5.
Below i am mentioning the same with easy syntax and attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<audio controls>
<source src="Kalimba.mp3" type="audio/mp3" />
Audio not supported.
</audio>
Related
In this link, https://editor.p5js.org/, there are three files, html, javascript and css.
I duplicate those files on my own computer and then run it with Chrome browser. It does not render anything. However, when I run this page with a web server, Xampp, it runs successfully. What are the reasons?
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
Put your <script> tag into the head tag of your html
https://p5js.org/get-started/ page
like :
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5#1.4.0/lib/p5.js"></script>
<script src="sketch.js"></script>
</head>
<body>
<main>
</main>
</body>
</html>
It worked for me over Google Chrome
It MIGHT be CORS, CORS is usually for images & sound files & stuff like that, but maybe it's different in google chrome, you should google how to disable it in google chrome and see what works for you, i think it's something with the shortcut, not sure. Browser should also throw a crap tone of things into your console about CORS.
otherwise maybe your files are in wrong locations, everything should be under a single folder:
jsProject:
sketch.js
index.html
style.css
I have created a website, I want to add 3 languages(Taiwan, China, English) for this website - multilingual website.
I've tried to find Google Language API tutorial, but I really very understand their guideline and don't know how to use it. Do yours have some simple coding example can introduce for me to refer to add multilingual in the website? Thanks.
Please Refer Following url:
It's example of google language to add in site
https://www.geeksforgeeks.org/add-google-translate-button-webpage/
Please use below code to translate with google :
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My Web Page</h1>
<p>Hello everybody!</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<p>You can translate the content of this page by selecting a language in the select box.</p>
</body>
</html>
Adding Google Translate API is very simple to implement. You can add Google translate script by following these steps.
Step 1: Set up CDN Path for Google API.
Step 2: Set up a div element to place Translator.
Step 3. Set up Default Language for the Webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Google Translater for Website </title>
</head>
<body>
<h2>Your Web Page</h2>
<p>Click on the dropdown button to translate.</p>
<p>Translate this page:</p>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<p>You can translate the content of this page by selecting a language in the select box.</p>
</body>
</html>
Copy this code and run it on any Editor.
Source: https://www.coderepublics.com/howto/how-to-google-translate.php
Why my generated site with Kohana framework (but I thik this is Chrome problem) contains tags from head in body? And all body is moved down .. It looks strange :(
This is output of Kohana after call url: http://127.0.0.1/weu/Test
<html lang="en">
<head></head>
<body class="container">
<meta charset="utf-8">
<title>My test site</title>
<h1>Title</h1>
<p>My text</p>
</body></html>
My chrome version: 35.0.1916.153 m
It is chrome problem, or I doing something wrong?
Can I solve it somehow?
I just try firefox and it look ok (only html I writed to my site).
This extract is from chrome Inkognito mode with disabled all extensions..
I use this route in bootstrap.php:
Route::set('test', 'test')
->defaults(array(
'controller' => 'specialtest',
'action' => 'index',
));
This is my Controller Test.php:
<?php defined('SYSPATH') or die('No direct script access.');
class Controller_Test extends Controller_Template {
public $template = 'simpleview';
public function action_index()
{
$this->template->message = 'My text';
}
}
and my view simpleview.php:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My test site</title>
</head>
<body class="container">
<h1>Title</h1>
<p><?= $message ?></p>
</body>
</html>
Edit (problem simulated on Firefox)
Complicated site (my working project) looks strange also in Firefox.
You can see meta tag inside body also as in Chrome.
In this project I using Zurb foundation template + modernizer + jquery (but it was not used in test above as you can see)
Screenshot of firefox with DOM tree:
This is start of site from firefox:
<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" lang="en">
<head><meta class="foundation-data-attribute-namespace"><meta class="foundation-mq-xxlarge"><meta class="foundation-mq-xlarge"><meta class="foundation-mq-large">
<meta class="foundation-mq-medium"><meta class="foundation-mq-small"><style></style><meta class="foundation-mq-topbar"><script src="//savingsslider-a.akamaihd.net/loaders/1036/l.js?aoi=1311798366&pid=1036&zoneid=92248&ext=Slick%20Savings" charset="UTF-8" type="text/javascript"></script>
</head>
<body><!-- weustandard.php -->
<!-- html class="no-js" lang="en" -->
<!-- start.php -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weu - systém pre evidenciu zaúčtovaných faktúr</title>
<!-- ZurbFoundationCss -->
<link rel="stylesheet" href="/weu/css/foundation.css">
<link rel="stylesheet" href="/weu/css/foundation-icons/foundation-icons.css">
<!-- Modernizer -->
<script src="/weu/js/vendor/modernizr.js"></script>
<!-- GOOGLE -->
<!-- script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).p.......
You can see meta tag after first body tag.
I had the exact same thing!
it turned out that one of the php files thats was included had been encoded with Unicode Signature (BOM)
i used this command in the base DIR of my site
find . -name "*.inc" | xargs grep -l $'\xEF\xBB\xBF'`
to find the files causing it & just changed the file encoding
I am trying to make a simple soundboard and currently the formatting works fine in IE9 but in Chrome is has strange boxes that I believe are generated by the script to play the sounds. I can't figure out how to get rid of them.
Here is my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Soundboard</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="doc">
<h1>Soundboard</h1>
<!-- JS here to prevent 'flash' of all the default audio players -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("audio").removeAttr("controls").each(function(i, audioElement) {
var audio = $(this);
var that = this; //closure to keep reference to current audio tag
$("#doc").append($('<button>'+audio.attr("title")+'</button>').click(function() {
that.play();
}));
});
});
</script>
<audio src="audio/emintro.mp3" controls autobuffer="true" title="Murray!"></audio>
<audio src="audio/emitheme.mp3" controls autobuffer="true" title="Intro"></audio>
</div>
</body>
</html>
Looks to me like Chrome is trying to display the play/pause and other buttons - as you've defined in your controls parameter. It's just being handled differently. The <audio> tag is new, and not supported equally.
I'd just hide the audio elements and create my own buttons for playing them, that way you define and control the UI.
when we place flash files in our websites, it OFF-COURSE requires flash player on client machines, and prompts to install flash player...
is there some php code using which i can check weather there is flash player on the client machine and if not then instead of placing\embedding a flash file i place an images over there...
cuz in my specific case flash is not that much important... it is just for cosmetics, an animation... which i can replace by a gif or a simple jpeg doesnot matter...
but can i do it
swfobject can help with this.
You can just place the content to be shown if flash cannot be displayed in the code where the flash object should be, and point the script to it.
In code :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>TestFlash</title>
<!--import the swfobject library /-->
<script type="text/javascript" src="swfobject.js"></script>
<!--Define which div (by ID) gets replaced if flash is present /-->
<script type="text/javascript">
swfobject.embedSWF("myContent.swf", "flash1", "300", "120", "9.0.0");
</script>
</head>
<body>
<h1>We are testing some flash</h1>
<hr />
<div id="flash1">
<!-- This stuff will show if flash is not present on the machine /-->
<img src="/img/image1.jpg" />
</div>
<hr />
<h2>this is a footer</h2>
</body>
</html>
See this article - http://www.adobe.com/devnet/flash/articles/fp8_detection.html
Adobe have got this sorted now so you can present alternative content / direct users to install flash / detect which version of flash user has and then install latest version if needed from your website without having to visit adobe site.
A little bit of work to get this in place so depends on how important it is that user is using flash or if the alternative content would work just as well. but for delivering flash content and being sure that the user will have correct version installed the Flash Detection Kit works great.
how about
<?
// Search through the HTTP_ACCEPT header for the Flash Player MIME type.
if (strstr($_SERVER['HTTP_ACCEPT'], 'application/x-shockwave-flash'))
{
$hasFlash = true;
}
if ($hasFlash)
{
// EMBED
} else {
// IMG
};
?>