Which is the best and cross-browser way to play a mp3 (very short) file via javascript?
I tried different ways but there's always a problem...
EDIT 1:
I don't need a "full" player, I just need a function than I can call everytime something happens
EDIT 2:
Ok, I've to explain better my problem. The server is a smartphone connected in a LAN, but not always to the internet. I want to use mp3 because the file weighs only 3kb (instead of 60kb of wav), but if the mechanism to play this file is too "heavy" (a player or jquery.js) I think is better to use the wav file.
Other suggestions?
Use this:
new Audio('your/url/here').play()
The documentation for the this (HTMLAudioElement) can be found at MDN, note that most of the controls are inherited by HTMLMediaElement.
Load the page with just a direct download to the audio file. Detect if the browser supports MP3s. If it does, progressively enhance the direct download into an AUDIO tag. Here's a sample:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Audio demo</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"></script>
</head>
<body>
<p id="audio">
Listen ยป
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="audio.js"></script>
</body>
</html>
And the Javascript:
$(function () {
var audioElement = $('#audio'),
href = audioElement.children('a').attr('href');
$.template('audioTemplate', '<audio src="${src}" controls>');
if (Modernizr.audio.mp3) {
audioElement.empty();
$.tmpl('audioTemplate', {src: href}).appendTo(audioElement);
}
});
I would imagine that most of the zillions of prebuilt MP3 playing plugins work like this.
UPDATE:
Since you've edited the question to specify that you'd prefer a solution that doesn't use jQuery, I will point out that rewriting this to not use jQuery is trivial. It's just longer and less elegant. Do keep in mind that Javascript libraries loaded from CDNs are usually cached by the browser.
try using my own script,
<script src="https://webtinq.nl/ap/script.js></script>
and when that script is linked, the only thing you need to do is
play('example');
Related
I'm experimenting with getting my "javascript parts" seperated from my html. I followed this post on stack overflow. My goal is to have separate files for each class.
I got it working one time.
But then I keep getting the first "old" output in the browser console even when its changed.
As if it's stuck in there. I tried restarting everything, the computer ect. The other pages in my app that aren't separated works just fine.
I hope someone can help :) Thanks :)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>New page</title>
</head>
<body>
<p>test</p>
<canvas id="canvas" width="1000" height="500"></canvas>
<script type=text/javascript src="{{
url_for('static', filename='js/main.js') }}"></script>
</body>
</html>
my file main.js is in the static/js folder.
first I wrote
main.js:
console.log("new text"); // changed the text
It's likely your browser caching the .js, try opening your page in a incognito/private window (chrome/firefox), clearing your browser cache, or do a hard refresh (Shift + F5).
You can use Ctrl+F5 or Shift+F5 to reload your current page ignoring cached content.
Your issue is very probably just related to your previous data being cached by the browser in order to enhance performance and reduce the amount of downloaded data.
It's cache problem. You can use Flask-Assets extension so then whenever you make a change to your static files it will give it a unique version number. assets.%(version)s.js. Or you can just use Ctrl+r or Ctrl+F5 to purge cache.
the task is quite simple, I guess. I would like to produce screenshots (png - files) from local html files.
My 'proof of concept' looks like this...
The files are located on a windows 10 machine in a local folder: c:\temp\
This would be a very basic html file - just to make sure that no sophisticated stuff is disturbing (file called: a.html):
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- otherwise format might be broken when opening from local source -->
<title>Savills Charts</title>
</head>
<body>
<h1>HalloBallo</h1>
<p>My baby baby, Balla Balla!</p>
</body>
</html>
The script which calls phantomjs was taken from here: http://www.cameronjtinker.com/post/2011/09/26/Take-Screenshot-of-all-HTML-documents-in-a-folder-using-PhantomJS.aspx
During my work I thought my own script was the problem but it doesn't look like it is.
var page = require('webpage').create();
page.open("file:///c:/temp/a.html", function() {
page.render('C:/temp/screenshot.png');
phantom.exit();
});
phantomjs is producing only black .png files.
If I switch the source from something local to something on the web
page.open("file:///c:/temp/a.html"
to
page.open("http://spon.de"
then everything works fine....
I'm lost...
What can I do?
KR,
Martin
Maybe someday someone stumbles as I did.
Therefore I want to clearify. The problem was, that (in contrast to a web browser) phantomjs does not set any colors by default. So in the website given (see example code) phantomjs simply renders black writing on black background.
If you give the body a backgroundcolor then you will see the black font.
So - it's solved.
Martin
Extreme beginner here guys so please explain as easily as possible.
I've read multiple variations of this and still am unable to figure it out, any help is greatly appreciated.
What I am wanting is a local environment to be able to learn HTML & javascript, but cannot get the script source inside HTML to correctly reference the .js file sitting in the exact same folder as the .html file. I am testing in a Chrome browser just referencing the .html file on my local machine via file:///C:/JavaScript/Index.html.
2 files(index.html and JS.js), both located locally on C:\Javascript
HTML Code:
<!doctype html>
<head>
<title>Title in browser tab</title>
</head>
<body>
"Text on the page"
<script src="C:\JavaScript\JS.js"></script>
</body>
</html>
-Based on what I read, if they are in the same folder I should be able to just reference <Script src="JS.js"> as there is no folder structure to look through, is that correct?
-I've also tried to absolute path via <script src="file:///C:/JavaScript/JS.js"> and related versions of <Script src="C:\Javascript\JS.js"> that do not work either.
In my JS.js file, I have nothing but alert(); to test functionality, as my reasoning for incorrect sourcing.
If I simply write <script>alert();</script> without referencing any outside source, the alert works as planned.
Thank you in advance!
I'd recommend popping open Chrome's Developer Tools to see where the issue may lie (and, if you're new to development, these are tools that are built into Chrome that will make your life so much easier).
Your assumption about not requiring a path should be correct: if you're referencing another file that lives in the same directory, omitting a full path will cause the browser to assume the path is relative (e.g. "right next to") to the current file:
<!doctype html>
<head>
<title>Title in browser tab</title>
</head>
<body>
"Text on the page"
<script src="JS.js"></script>
</body>
</html>
I scoured the site for hints that might answer this for me. This might be SoundCloud-specific, or this might be just a JS newbie question. I searched StackOverflow to the best of my ability trying to resolve this myself, but I'm pretty well stumped. I'm sure it's something obvious and easy to someone with more experience than me.
I'm trying to build a test webpage that uses SoundCloud's JS API for streaming tracks without using their player UI. I looked at their docs, found their example (here: http://connect.soundcloud.com/examples/streaming.html), and tried to make it work with a track and my Client ID, but to no avail.
Here's my basic HTML page, based on the example linked above:
<!DOCTYPE html>
<html>
<head>
<title>Some Page</title>
</head>
<body>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script>
SC.initialize({
client_id: "MY_CLIENT_ID"
});
$("#stream").live("click", function(){
SC.stream("/tracks/47101735", {autoPlay: true});
});
</script>
<input type="button" href="#" id="stream" value="Stream It Again, Sam" />
</body>
</html>
In my browser's error console, when I load this page, I get the error: ReferenceError: Can't find variable: $. Thinking back to all I know about JS and web programming (which is almost nothing), I figured the SoundCloud SDK wasn't getting loaded. I tried a number of things to get the path to the 'sdk.js' file to resolve, like adding an http:// absolute path to their hosted JS file or pointing it at a local copy of the SDK. Didn't seem to make a difference.
Anyone have a hint or a solution for me? Syntax for a better search to an existing answer I may not have found? Thanks very much.
The sdk.js file is getting downloaded succesfully..
$ represents jquery object there.. so , we need to include jquery.js as well..
<!DOCTYPE html>
<html>
<head>
<title>Some Page</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"> </script>
</head>
<body>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script>
SC.initialize({
client_id: "MY_CLIENT_ID"
});
$("#stream").live("click", function(){
SC.stream("/tracks/47101735", {autoPlay: true});
});
</script>
<input type="button" href="#" id="stream" value="Stream It Again, Sam" />
I'm trying to embed a .M4V video file on a web page and it seems to disagree with all my attempts. I need it in this format as it is for someone else's ongoing project.
I am trying to use this java library file to initialize/talk with:
<script type="text/javascript" src="qtobject.js"></script>
Here is my code attempt (not working, but works when the format is .mov and the script is changed accordingly):
<script type="text/javascript">
var myQTObject = new QTObject("video.m4v", "video_1", "640", "480");
myQTObject.write();
</script>
Here is another attempt (also not working):
<embed href="steve.m4v" type="video/x-m4v" />
Any suggestions as to what I should and/or should not be doing?
If you're not forced to use Quicktime, the Flash based Long Tail Video Player is free and can do Quicktime encoded MP4 if the client has Flash 10 installed.
Not a reliable solution you can use now, but when the browsers grow up, the video element can be used from within javascript. Imagine doing video resizing using just css.
http://daringfireball.net/2009/12/html5_video_unusable#fnr1-2009-12-21