JavaScript - Audio Tag, Flash Mp3 Player, Browser Check?
I put together a custom audio player using code from a few players.
http://66.147.244.101/~fastlif2/wp-c...mp3player.html The player works in CHROME perfectly. The AUDIO tag supports mp3's in Chrome. However, there are compatibility issues in other browers. The audio tag works in FireFox, but only with ogg files (which I don't have). And IE is pretty useless. So, I need to have the player play in Chrome normally (as it is now). If the browser does not support mp3s or the audio tag, I want to default to my Flash player. And, if flash isn't supported, then I want to have a download link. I thought that if the browser didn't support the audio tag, it would default to the embed code that I have listed in there ... but it isn't working. Odd. Any idea what is wrong? Since I am not a strong javascript programmer, I need some way to check this. Also, there is so much javascript, the I am very hesitant to play with the code anymore (as I may mess it up). Please help Similar TutorialsHi, I am a JavaScript novice, and appreciate any help you can give. For design reasons, we did not like the appearance of a still video on our web page. So I write a short little script to replace a picture that we selected, with the code for a flash player, once the image was clicked. The code works exactly as designed on IE and Chrome. It works *almost* as designed on Firefox and Safari -- but on those browsers the "fullscreen" button in the plugin doesn't work. It is *not* a problem with the FlowPlayer code. If I simply put the FlowPlayer code into a web page, it works fine. I think that somehow some browsers do not want to let the FlowPlayer expend outside of the JavaScript object box I created -- though that is just an hypthesis. If you have any insight or suggestions, I would appreciate it. The page is at http://sudval.org/test.html The code: Code: <div style="line-height: 12px;letter-spacing: 0px;"> <script type="text/javascript"> function changeText(){ var strOut; strOut = " <object id=\"videoplayer\" width=\"334\" height=\"204\" type=\"application/x-shockwave-flash\" data=\"http://app.provdn.com/flash/flowplayer.swf\">"; strOut = strOut + " <param name=\"movie\" value=\"http://app.provdn.com/flash/flowplayer.swf\" />"; strOut = strOut + " <param name=\"allowFullScreen\" value=\"true\" />"; strOut = strOut + " <param name=\"allowscriptaccess\" value=\"always\" />"; strOut = strOut + " <param name=\"flashvars\" value=\"config={\'playlist\':[{\'url\':\'http://cdn.provdn.com/4931/thumbnail/frame_0000.png\',\'scaling\':\'fit\'},{\'url\':\'http://app.provdn.com/output_videos/0e7c9ace9c16d4351b5108133cf1efaceebe89bb\',\'autoPlay\':true,\'scaling\':\'fit\'}],\'plugins\':{\'controls\':{\'url\':\'http://app.provdn.com/flash/flowplayer.controls.swf\',\'playlist\':false,\'backgroundColor\':\'#000000\',\'tooltips\':{\'buttons\':true,\'fullscreen\':\'Enter Fullscreen mode\'}},\'bwcheck\': { \'url\': \'http://app.provdn.com/flash/flowplayer.bwcheck-3.1.3.swf\', \'netConnectionUrl\': \'http://cdn.provdn.com/bitrate/test.mp3\', \'bitrates\': { \'http://app.provdn.com/output_videos/542539e49d4056ce6d3968958313be3dee94614b\':200, \'http://app.provdn.com/output_videos/d31b9a3562c35244cb2c2a28bb4a9aaa1edd1995\':600, \'http://app.provdn.com/output_videos/0e7c9ace9c16d4351b5108133cf1efaceebe89bb\':1000 }, \'urlPattern\': \'{1}\', \'urlExtension\': \'swf\' }}}\" />"; strOut = strOut + " <param name=\"bgcolor\" value=\"#000000\" />"; strOut = strOut + " <param name=\"wmode\" value=\"opaque\" />"; strOut = strOut + " <!--[if gt IE 6]><!-->"; strOut = strOut + " <object width=\"334\" height=\"204\" type=\"video/quicktime\">"; strOut = strOut + " <param name=\"src\" value=\"http://cdn.provdn.com/4931/thumbnail/frame_0000.png\" />"; strOut = strOut + " <param name=\"href\" value=\"http://app.provdn.com/output_videos/54339bc0f4a7c39dd0d746f52139d3a6b6c46375\" />"; strOut = strOut + " <param name=\"target\" value=\"myself\" />"; strOut = strOut + " <img src=\"http://cdn.provdn.com/4931/thumbnail/frame_0000.png\" width=\"334\" height=\"204\" alt=\"No Video\" title=\"No video playback capabilities.\" />"; strOut = strOut + " </object>"; strOut = strOut + " <!--<![endif]-->"; strOut = strOut + " </object>"; document.getElementById('boldStuff').innerHTML = strOut ; } </script> <b id='boldStuff' onclick='changeText()'><img src="images/videoimg.png" alt="no video" title="Introductory Video" width="334" height="204"></b> <p><A HREF="/08_cont_03.html"><img src="images/OH012211.jpg" alt="button" width="161" height="181" title="Open House!" BORDER="0" ALIGN="right" style="margin-left: 10px;"> </A></p> <font size="2" style="font-family:arial; font-size:80%; line-height:1.3;"> <p id='boldStuff' onclick='changeText()' align="left"> This video is a glimpse into the life of our school. Enter a world of young people who are exuberant about their lives, and are fully in control of their education. We hope you will enjoy their spirit, their focus, and above all their intensity in pursuing their passions. <br><img src="images/playvid.png" alt="Play Video" title="Play Video" width="100" height="25" style="margin-top:10px;"> </p> </font> </div> Hello to all, Can anyone please assist in the following?: I have an embed code that needs to play only the first 10 seconds of an mp3 or audio file <EMBED SRC="clip.mp3" WIDTH=144 HEIGHT=60 STARTTIME="00:00" ENDTIME="00:10" > Unfortunately all the MP3 is getting streamed and the the STARTTIME and ENDTIME work on Netscape only Is there any way to stop an audio file from streaming after a number of seconds? If there is a way to crop the mp3 during the upload process, I would appreciate your help in this direction Thanks Simon I am working on a website that features a custom javascript enabled audio player with an animated playhead to follow along with the provided spectrogram. An example of this is included below. http://cetus.ucsd.edu/voicesinthesea.../humpback.html I am having difficulty figuring out why the audio/spectrogram player does not work on an iPad. This component was built by a developer who I am not longer in contact with, thus I am in urgent need of some advice/wisdom. Thank you! I am creating a very content rich news/media website that requires an audio player. The audio player should be seen by the user as soon as they enter the website and the playlist should play throughout their time spent at the website and should not be restarted or stopped when navigating the website. We originally were using a frameset for the audio player, but the fact that none of the pages through out the site could be reached through a link in the URL bar proved to be too much of an issue. So the new idea was to open the audio player in a javascript pop-up window. But because of the nature of the website, we found that it was very common for users to go "back" in their browser to the homepage after they had navigated away, which would cause the pop-up code to be activated again and would make the pop-up reload, interrupting the audio. So then we moved the pop-up code to the splash page so that when you enter the main page, its already open, and it can't be interrupted. But THEN we found that the pop-up window was of course opened behind the main website's window, which made it hidden and useless. So we currently have no solutions! All we need is for this pop-up window to take focus and be the very top window, and once its opened to never be reloaded/refreshed again. Does anyone have a solution?! Any help is appreciated! I have a tiny flash player(with controls) in a table on it's own html page. It only plays one piece of music. But I need an unusual popup script which I can't seem to find. I want the tiny player (75 x 30) to popup on it's own without all the window (chrome?) surrounding it. I want it to be in either the top or bottom left corner. I would also like it to popup on load but turn off when I go to a particular page that I have a sound video on and then turn off completely when they leave the domain. It is a music site. Can some one please write a script like this for me and how do I get around annoying popup blockers. I have 3 tabs with a flash video playing in each. If a user clicks on a video and then decides to move to another tab while the video is playing.... the video stops and the tab is switched. I am using the code below to achieve that. Code: onClick=player1.sendEvent('STOP'); player2.sendEvent('STOP'); player3.sendEvent('STOP'); this works fine if I have the tabs appearing in sequence with player1 embedded in the first tab, player2 in the second and player3 in the third. However, I wanted to randomize the tabs, in which case if tab 3 containing player3 appears first and is played and then the user switches to another tab the video keeps playing.... meaning the above code does not work in that instance. I am at a loss here cause i thought that the onClick event should be going through all the players and stopping them. website: http://tinyurl.com/ydalz2r (at the moment the tabs are displayed in sequence) Hello guys, I've made a music playlist where you should be able to listen to music (of course). All works fine, i am capable too listen to all the music in my playlist. But, when i reload my website and click on a song, it send me an error message - "Adobe Flash Player has stopped a potentially unsafe operation. If you want the program to communicate with Internet, click on settings." When i click on settings, i get another message - "Sorry, this page is not available". I had also another Option instead of settings which where, "ok". When i click on OK it works fine and it's no problem to scroll through the musiclist and listen to all of the soft songs. But i don't even want the message to appear from the very first time. Do you know what i should do to get rid of the message? Here's my code: Code: <!-- BEGIN JAVASCRIPT PLAYER EMBED CODE --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <div id="player-holder"></div> <script type="text/javascript"> var options = {}; options.playlistXmlPath = "playlist.xml"; var params = {}; params.allowScriptAccess = "always"; swfobject.embedSWF("OriginalMusicPlayerPlaylist.swf", "player-holder", "250", "250", "9.0.0",false, options, params, {}); </script> <!-- END PLAYER EMBED CODE --> Regards Webjoker Hi all, I'm currently working on a page that is presented to users which will check browser version, OS version etc. I've managed to do all of these checks with JavaScript but I'm struggling to find out how (or even IF) I can get what version of Windows Media Player the user has installed. We're looking to see if they have WMP11 or greater. The searching I've done has thrown up a couple of things (like a check to see if the version is 5.2 or 6.4 or higher by looking at mimeTypes). Basically can anyone confirm if this is actually possible and if so any pointers would be appreciated. Thanks in advance Hi all! I started using the JS-based Free Flash MP3 player on a site, but I'm stuck on what I thought would be a simple step. I tried their site for help, but at first their contact form was broken, and now their site is no longer up Here's what I'm trying to do, I need this player to access an external folder to generate the playlist. However, the player says to use a "relative" path only: Code: <!-- Script that embeds player. --> <script language="javascript" type="text/javascript"> var so = new SWFObject("flashmp3player.swf", "player", "675", "300", "9"); // Location of swf file. You can change player width and height here (using pixels or percents). so.addParam("quality","high"); so.addVariable("content_path", "http://www.blessedhopeministries.com/sermons/Rev.%20Eddie%20Conard/"); // Location of a folder with mp3 files (relative to php script). so.addVariable("color_path","default.xml"); // Location of xml file with color settings. so.addVariable("script_path","flashmp3player.php"); // Location of php script. so.write("player"); </script> I need it to access: http://www.blessedhopeministries.com...ddie%20Conard/ These are both of my client's sites, but I'm just trying to upload to one central folder so that two players on two separate sites can access the same files. Here's a piece of JS that is in a .php file associated with this player. I'm not sure if it will help, but here it is: Code: class ID3{ var $file_name=''; //full path to the file //the sugestion is that this path should be a //relative path var $tags; //array with ID3 tags extracted from the file var $last_error_num=0; //keep the number of the last error ocurred var $tags_count = 0; // the number of elements at the tags array I'd appreciate any help from you pros and I apologize if I didn't post in the correct place. Thank you! I'll be the first to admit, I am not skilled with javascript, but I can do a little work here and there. I remember learning there is a way to detect a user's/viewer's browser. Is there a possible javascript that allows me to detect a viewer's browser, the based on the browser, selects css/html to use so that the website is viewed correctly?
i am trying to find out how to check if your browser is google chrome and if it is to display in div id tag called google else display download google chrome. I have searched the web and found nothing on this. can you help me? Its the only thing im stuck on. Code: <script type="text/javascript"> document.getElementById("google").style.backgroundImage="url('images/poweredbygoogle.jpg')"; </script> hi guys, i was wondering if anyone could help me. Ive been looking into the above and want to implement it on my site. I have created no flash pages and flash pages, but instead of creating a portal at the front of the site that leads you to a flash site and a no flash site id like to do it so the page detects flash or not, and redirects to whichever URL. Is this possible, or do multiple browsers cause problems ? cheers On this webpage http://www.corkdiscos.com/testimonials.html i have a like button. when a user clicks like a comment box appears. when i unlike the button the comment box disappears this is ok but when a user has already liked the facebook page and comes to my webpage the comment box does not show. so im looking for a piece of javascript to check if a user has like the button on my page and if so to show the comment box. please check my source code of the website http://www.corkdiscos.com/testimonials.html to see what i have so far. any help would be greatly appreciated I've got this JavaScript code that I'm using to play audio on my site made specifically for iPhones, iPods, and whatnot. However, my only problem is, that I can only pick one audio file to play from, no matter what. Can someone tell me what I'm doing wrong? I really need this specific code cause it allows me to play audio without going into the Media Player on the iPhone and iPod. Here's what I have in the head section: Code: <script type="text/javascript"> function play_single_sound() { document.getElementById('audiotag').play(); } </script> And the body: Code: <div id="audio"> <audio id="audiotag" src="audio.wav" autobuffer="autobuffer"></audio> </div> And now to actually play the audio: Code: <a href="javascript:play_single_sound();">Play audio</a> I can play audio fine, but I'm only limited to one audio file per page. Is there anyway around this?? Heya peeps So I'm in the process of building a website where audio can be purchased and downloaded. I want each file to allow a preview, but would rather the preview occur on the same page, rather than load up a blank page with a quicktime plugin splodged in the middle. Is there a way of doing it? All I want is a basic play/pause/stop button. To control a piece of sound. Thanks Hi everyone, I'm an animator just beginning to learn the unity game engine. In other words, I know almost no JavaScript and would like to learn the basics in parallel with working on my project. I would ultimately like to create a scene in which I can use the spectrum of a sound track to drive certain properties of objects in the scene. I started off by following this spectrumAnalyser tutorial which I then expanded for 21 cubes. This was working pretty well, but the higher frequencies looked like they needed much more of the spectrum than the lower. I asked a coder colleague (more proficient in c# than js) for his help in expanding the code to analyse the full spectrum. He showed me a really nice way to assign various parts of the spectrum to each cube in the scene using a fibonacci sequence to gradualy assign more and more of the spectrum to the cubes that were to be driven by those frequencies. So as you can see I commented out some chunks of now redundant code (its a bit of an unfinished mess but I've left them in so you can kind of see what i was trying to do). However this new technique now doesn't actually drive the cubes anymore and my friend doesn't understand why. Maybe somthing to do with the AudioListener.GetSpectrumData? I was wondering if any of you guys could point me in the right direction. This is what we have now: ----------------------------- #pragma strict function Start () { } function Update () { //var Audio : AudioListener; //var spectrum : float [] = Audio.GetOutputData; //AudioListener.GetSpectrumData(1024,0,FFTWindow.Hamming); var spectrum : float[] = AudioListener.GetSpectrumData(1024,0,FFTWindow.Hamming); var cubeList : float []; cubeList[0] = spectrum[1]; cubeList[1] = spectrum[2]; cubeList[2] = spectrum[3]; var index : int = 3; var fibonacci : int = 1; var fibonacciIncrease : int = 1; for(var i : int = 3; i < 21;++i) { cubeList[i] = 0; var maxIndex : int = index + fibonacci; while (index < maxIndex) { cubeList[i] = cubeList[i] + spectrum[index]; ++index; } fibonacci = fibonacci + fibonacciIncrease; fibonacciIncrease++; } /* var c6 : float = spectrum[7] + spectrum[8] + spectrum[9] + spectrum[10]; var c7 : float = spectrum[11] + spectrum[12] + spectrum[13] + spectrum[14] + spectrum[15] + spectrum[16] + spectrum[17]; var c8 : float = spectrum[18] + spectrum[19] + spectrum[20] + spectrum[21] + spectrum[22] + spectrum[23] + spectrum[24] + spectrum[25] + spectrum[26] + spectrum[27] + spectrum[28]; var c9 : float = spectrum[29] + spectrum[30] + spectrum[31] + spectrum[32] + spectrum[33] + spectrum[34] + spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40] + spectrum[41] + spectrum[42] + spectrum[43] + spectrum[44]; var c10 : float = spectrum[66] + spectrum[67] + spectrum[68] + spectrum[69] + spectrum[70] + spectrum[71] + spectrum[72] + spectrum[73] + spectrum[74] + spectrum[75] + spectrum[76] + spectrum[77] + spectrum[78] + spectrum[79] + spectrum[80] + spectrum[81] + spectrum[82] + spectrum[83] + spectrum[84] + spectrum[85] + spectrum[86] + spectrum[87]; var c11 : float = spectrum[18] + spectrum[19]; var c12 : float = spectrum[20] + spectrum[21] + spectrum[22]; var c13 : float = spectrum[23] + spectrum[24] + spectrum[25]; var c14 : float = spectrum[26] + spectrum[27] + spectrum[28]; var c15 : float = spectrum[29] + spectrum[30] + spectrum[31]; var c16 : float = spectrum[32] + spectrum[33] + spectrum[34]; var c17 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40]; var c18 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40]; var c19 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40]; var c20 : float = spectrum[35] + spectrum[36] + spectrum[37] + spectrum[38] + spectrum[39] + spectrum[40]; var c21 : float = spectrum[1000] + spectrum[1001] + spectrum[1002] + spectrum[1003] + spectrum[1004] + spectrum[1005] + spectrum[1006] + spectrum[1007] + spectrum[1008] + spectrum[1009] + spectrum[1010] + spectrum[1011];*/ var cubes : GameObject[] = GameObject.FindGameObjectsWithTag("CubeTag"); for(var k = 0; k < cubes.length; k++) { switch (cubes[k].name) { case 'c1': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c2': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c3': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c4': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c5': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c6': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c7': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c8': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c9': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c10': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c11': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c12': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c13': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c14': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c15': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c16': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c17': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c18': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c19': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c20': cubes[k].transform.localScale.y = cubeList[k]*10; break; case 'c21': cubes[k].transform.localScale.y = cubeList[k]*10; break; } } } ------------------------------ Many thanks for any help you can give, i'm off to learn some basics! Hello, I found the javascript for triggering audio on mouseOver (on the page link below) very helpful. Question is - how to stop the audio on mouseout? http://www.javascriptkit.com/script/....shtml#current So I have been converting videos to mp4 and it is working fine (I can download the file and play it in wmp without a hitch) but when I try to use the html5 video tag by itself or with video js (videojs.com) enabled, the video only plays audio. It doesn't play any video. What could I possibly be doing wrong? Video: http://www.xonicgames.com/user/uploads/videos/6360.mp4 JS: http://xonicgames.com/video/?i=6 Thanks Hi, I worked on this website : http://www.kesslercareers.com/index.html and cannot find out why it does not work in IE while it works in other browsers. The small video does not play while the sound does. As far as I can see it works fine in FF and Chrome. Anybody any idea? Thanks Purmar |