I would like to include an audio/possible video player on my website with the following attributes:
Must be placeable via a <div>;
Styled via CSS;
Can read all ID3 info;
Can pull the file from a database (probably GoDaddy's Easy Database);
No flash;
Transferrable to smartphones etc.
I have been herded to SoundManager2 which appears to fit the bill, but I seem to be having real trouble just making a clickable image to begin playing my mp3. I have zero JS skills so am going from silly basic and building up slowly. I suppose I have two questions:
Is there another media player that is better suited?
I can't create a Fiddle with what I have so far, but this is the very simple HTML - what is going wrong?:
<html>
<head>
<script src="script/soundmanager2.js"></script>
<script>
// Path to Flash Files
soundManager.url = 'swf/';
soundManager.onload(function(){
// SM2 is ready to Play Audio
// Create "mySound"
soundManager.createSound({
id:"mySound",
url:"audiofiles/my.mp3",
onfinish:function(){window.location.href='index.html}});
};
// Play File
//soundManager.play('mySound','my.mp3');});
</script>
</head>
<body>
<img src="image.jpg" alt="Previous" border="0" width="400" height="400" onclick="soundManager.play('mySound',{volume:100})";>
</body>
</html>
I had copied this code from another website, but I have a sneaking suspicion that the code was incomplete, so any help would be...err...helpful.
I operate the website you say you took the code from. I updated it and it should work. Make sure you do both sections in the tutorial. The second section assumes that you are using the same file structure as the first. This should work completley fine now:
http://en.wikiaudio.org/SoundManager2:How_to_play_and_trigger_sound
Related
I'm looking into creating browser game development. I have a strong background in C programming (c/c++/c#) and web development (html/css/wordpress/some JS). This area of programming seems like chaos and no one has a firm framework that works well and is good.
I've been exploring at libraries available such as gameQueryJs and other tutorials I've found such as Canvas Tutorial, I keep running into the same issue.
They all just jump STRAIGHT into the code. No pre-set up, how the HTML page should look like, just nothing. They all go BANG, right into the javascript.
Before I get into the javascript I need to set up the web page. I am wondering how such a page would be designed like and how to import scripts correctly.
For example, if I wanted to add jquery and the gamequery libary, would I add it like this?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/jquery.gamequery-0.7.1.js"></script>
<title> GAME TITLE </title>
</head>
<body>
<div id="game-txt">
<h1> GAME TITLE </h1>
</div>
<div id="wrap">
<div id="canvascontainter">
<canvas id="canvas" width="300" height="300"></canvas> -- ignore this, this was when I was playing with the canvas tutorial
</div>
</body>
</html>
<!-- SCRIPT STUFF DOWN HERE? -->
To further explain my issue, here is gameQueryJS's first line of code they introduce to you to use.
var PLAYGROUND_HEIGHT = 250;
var PLAYGROUND_WIDTH = 700;
$("#playground").playground({height: PLAYGROUND_HEIGHT, width: PLAYGROUND_WIDTH});
Where does that go? What is the playground id they are manipulating on the page? They just throw that line at you like every other tutorial I've found without explaining anything.
Javascript can be placed in script tags or in a seperate file just like the gameQueryJs libraries that you are loading.
Where you put the script tags is almost entirely up to you, although most people will put them in the section.
Putting them below the closing tag of the page is not correct however. Unfortunately most browsers will accept and execute it even then because they try quite hard to make every page they get served work. For more on where to place script tags check W3Schools
The playground they refer to is an element that you'd have on your page, in their example from lesson one it is a div with the id playground.
Also, if you check the first example that they give you can select Edit with JSFiddle the code they show there should help anwser part of your question as well as add to the lack of information you complained about.
I apologize as I am a relative beginner to programming, especially for the web. I am currently try to utilize the videos from code player but the website does not show how each file is linked together through the html. The below is the current structure of the html file. I would like to know how this needs to be changed to get the javascript to display in the canvas. (The style sheet works correctly)
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" type="text/css" href="GaugeStyling.css">
<canvas id="canvas" width="300" height="300">
<script type="text/javascript" src="gaugescripts.js"></script>
</body>
</html>
i am too a relative beginner but for a start you don't need the type in the script anymore and you put the script in the head section, which you don't seem to have.
In your gaugescripts.js, i presume you have a line such as:
var canvas=document.getElementById("canvas");
if you so that how you connect the two after the i'd need to see the script to see where your problem lies.
good luck
I am trying out an audio player - http://www.codebasehero.com/2011/06/html-music-player/ - I want to have a separate button on my site which will start that player playing. I have been over the jquery and I can't figure out how to affect the player to start playing from an external link or button. I have tried putting
$myJplayer.jPlayer("play");
into the console but I get an error ReferenceError: $myJplayer is not defined
Can anyone point me to the proper piece of code to get the player to start.
Sounds like you need to include a reference to the source script
<script type='text/javascript' src='http://www.codebasehero.com/wp-content/themes/blooog/assets/js/custom-libraries.js?ver=1.0'></script> might be it?
Download it to your site don't link to their js or you will be sorry later when they upgrade/change paths.
---- edit
Try this.
<div id='myJplayer'/>
<button onclick="play()" name="play" value="play">
<script>
function play(){$('mjPlayer').jPlayer("play");}
</script>
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');
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