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>
Related
I am trying to stream an audio file in google chrome . The file is hosted at a wildfly server.
Below is the sample code
<html>
<head>
<title>Audio Demo</title>
<script type="text/javascript">
function updateSource(){
var audio = document.getElementById('wavSource');
audio.src = 'https://SERVER_URL:8443/FILE_PATH/FILE_NAME.wav';
var a = document.getElementById('audio');
a.load();
}
</script>
</head>
<body>
<audio id="audio" controls="controls">
<source id="wavSource" src="" type="audio/wav"></source>
Your browser does not support the audio format.
</audio>
<button onclick="updateSource();">Item1</button>
</body>
When the button is clicked, the audio.src is set to the specified file. This sample code works fine in firefox but does not work in google chrome. If I paste the audio file link in a tab, then also nothing happens (not able to play), But I am able to save the file.
On the server side a softlink is created in deployment directory which points to the audio file location.
Some other things that I have noticed is that if I am bundling the audio file in an EAR, then I can access it. Now that the audio file is being generated on the fly in a different location , for which I have created a softlink in deployment directory. In this case I am not able to play it.
Can some one please tell me what is that I am doing wrong?
Thank you
well you code looks fine. I tried it with different audio files and it works. I think issue must be with your audio file or path.
Your sample code works as I checked it with a .wav audio source as you can see below. Check the actual file on your server, that you want to play, whether it's accessible, playable and it's an actual .wav file.
If this doesn't work in your Google Chrome, clear its cache completely, update it, restart your computer and check again. It should work then.
Although please, put your script in the bottom of the body tag:
<html>
<head>
<title>Audio Demo</title>
</head>
<body>
<audio id="audio" controls="controls">
<source id="wavSource" src="" type="audio/wav"></source>
Your browser does not support the audio format.
</audio>
<button onclick="updateSource();">Update Source</button>
<script type="text/javascript">
function updateSource(){
var audio = document.getElementById('wavSource');
audio.src = 'http://www.wavsource.com/snds_2018-06-03_5106726768923853/people/men/about_time.wav';
var a = document.getElementById('audio');
a.load();
}
</script>
</body>
</html>
Source: WavSource.com
I have finally solved the issue. It is related to Wildfly 10.0.0. See this link.
All of your audio your files MUST be named as HTTPS, not HTTP. It's a security issue with Chrome.
For one year I couldn't figure out why my random MP3 play JavaScript code stopped working. It worked on Firefox, but not Chrome or Internet Explorer. I tried everything I read online, but nothing worked. I just needed to add an "s" at the end of each "http" for each audio file in the JavaScript code. I had 3,080 files...lol. My webpage works fine now.
Also, your website must be secure. Even if you have security certificates, they won't work unless you activate them, which you can learn how to do online. You can tell if your website is secure by looking for a little closed lock symbol before each web address above.
I have this AddThis:
<a class="addthis_button addthis_default_style">Share Site</a>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=myid">
</script>
Looking good everywhere ...When clicked, I get the modal box/pop box with my sharing links...but when I click on iPad nothing happens...anyone know how to get this resolve?
Here's what I get running that code in the iPad simulator: http://i.imgur.com/4dYXnYw.png
Can you point me to a URL where you're running this code? The issue might be with how our code interacts with other elements on your page.
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
I am trying to play a sound in Safari on a special event.
This is what I am doing
<html>
<head>
<in a js file>
if(event)
document.getElementById('sound').play();
</in a js file>
</head>
<body>
<audio id="sound" src="pling.mp3"></audio>
</body>
</html>
The sound pling.mp3 is in the the same folder as the html file.
The result in Safari developer console is:
TypeError: Result of expression 'document.getElementById('sound').play' [undefined] is not a function.
What am I doing wrong?
Isn't this the way it is supposed to work?
Try the following:
document.getElementById('sound')[0].play();
I would use the Audio API, as explained here, to play sound effects after certain events. In my opinion the audio tag is more suited for songs can be played, stopped and controlled via the UI. If you do use audio tags, you must pause and rewind before it can be played again. You can use this script which does that automatically.
If you want to play audio for example on hover events, do something like this in jQuery:
// iterate through the elements that must have audio applied on hover
$('.audio_effect').each(function() {
$(this).on('mouseover', function() {
new Audio('path-to-audiofile.mp3').play();
});
});
Since you can't play an Audio element again without resetting its internal pointer, the easiest course of action is to just create the element fresh on every hover, like I am doing above.
First of all my site does not use Drupal.So any alternatives for a popup video player funcionality would be appreciated.
I want to show a popup you tube video player in my web page.I downloaded lighbox from the
following link: http://ftp.drupal.org/files/projects/lightbox2-6.x-1.11.zip
I extracted the zip file into my sites root
I added the following lines in my page header:
<link type="text/css" rel="stylesheet" media="all" href="/lightbox2/css/lightbox.css?1" />
<script type="text/javascript" src="/lightbox2/js/auto_image_handling.js?1"></script>
<script type="text/javascript" src="/lightbox2/js/lightbox_video.js?1"></script>
<script type="text/javascript" src="/lightbox2/js/lightbox.js?1"></script>
and the following in the body:
<a href="http://www.youtube.com/watch?v=0gBtF_awV2o" rel=lightvideo[width:500px;height:400px;]>
<img src="sample" alt="Live TV">
</a>
But the video opens up in a new tab and not as a popup.Where am i going wrong?I cant find tutorials for this anywhere, although i have this kind of code in many other pages with popup videos.
Edit: Used shadowbox. Opens up youtube page instead of popup!
Edit: Problem solved! Got Shadowbox to work. It's brilliant and easy. The commercial licence costs $20 though.
You probably are either not calling jQuery or lighbox correctly.
Make sure the have the two src correct.
I'm not sure I understood your question but you cant display video with lightbox, it says so in the FAQ and it recommends thickbox.
You could also use something videolighbox or any out there.
Good luck!
I would download Lightbox 2 from here and see if it works any better.
The reason it doesn't work is because the lightbox.js file included in the Drupal module is a modified version that uses the Drupal.settings variable, which if you don't use Drupal, is undefined.
Lightbox2 video does work in drupal.
You have to enable video support in the lightbox2 settings
The url: yourdrupal.com/admin/config/user-interface/lightbox2
The flv player should be empty if you don't have one.