Dynamically Playing MP3 files downloaded with AJAX - html

I have the need to play an MP3 file on my website downloaded via AJAX like the "Listen" button on the Google Translate page (in fact, I'm doing the exact same thing). How is this done? I don't believe it's facilitated by Flash, so that's not the answer.

I'd suggest loading an iFrame with the sound file embedded within. It's an ugly solution, but it's probably got the best crossbrowser support until HTML5 turns into a thing.

Related

Is swfobject.js still needed in html5 for swf files?

I developed an online training course 5 years ago that had many swf files on many pages. This was XHTML. I needed the swfobjwct.js file, plus I needed MANY lines of code for the swf to play. I did not write this code, Dreamweaver did on insert.
So, now I'm being asked to update this training course. I have converted each html file to html5. I've noticed that I can use this one simple line of code:
embed src="swf/m02-02.swf" width="91px" height="20px"/
I don't seem to need anything else. All old code that used to be needed for this swf to play has been stripped out.
I've tested it a few places and the file works. I had a few people test it on their platform and it also works.
Is this all I need nowadays to play an swf file?
I don't want to change the remaining 200 files if for some reason this isn't correct.
Modern browsers understand <embed> -- most browsers have supported it for years, but HTML5 made it official -- and yes, you can use it to embed a SWF to your page directly without SWFObject. However, if the browser does not have Flash Player installed (and many don't nowadays), the learner will only see whatever "unable to load content" message that particular browser provides.
SWFObject provides extra features, namely detection of Flash support, enabling you to provide fallback content if Flash is not available.
Adobe Dreamweaver spit out some hairy code back in the day, so I'd recommend continuing to use SWFObject but replacing Adobe's bloated code with some cleaner code of your own. There are simple examples for SWFObject at http://learnswfobject.com/the-basics/dynamic-publishing/index.html
Regardless, if you change your code, be sure to test in all major browsers, including IE9-11.

Pseudo-Stream flv from other server, using a local html file

Is it possible to pseudo-stream a flv video on an external server that only allows pseudo-streaming if you watch the video from a website hosted on this external server?
I want to access the flv file using a html file on my pc. (Not using another website.)
I tried it using the flowplayer, but it wasn't pseudo-streaming (I couldn't seek behind the point in the video that wasn't already downlaoded).
Btw if I download the whole sourcecode of the external site and try to run it in my browser the player stays black and doesn't do anything.
If it is not possible, it would be nice if you would explain me why. :)
And yes I have permission to do this.
edit:
Sorry, I'm soo stupid. -.-
I used a flowplayer configuration that didn't allow pseudo-streaming.
The example on this site works great: http://flash.flowplayer.org/demos/plugins/streaming/
So in order to "Seek" via flash or html 5, you need something called a Moov Atom, you could think of the Moov Atom much as you would a Key Frame in a Standard Mpeg 2 file.
If you have the Moov Atoms (you can apply these with atomic parsley or other encoders - Just Google how to add Moov atoms to flv.) you will then be able to seek from atom position to atom position. [Much like when you seek an mpeg it moves from keyframe to keyframe]
I have tried to keep this answer generalist, as I don't think you really want to know all the finer details of the flv container or it's playback.
Hope this helped.
Cheers
Craig

loading video file from torrent to html5 video

Can I use torrent file with videos and this videos loaded in ?
I have torrent with 3 videos. And I have one simply html page with video.js.
Video 1: Wellcome.wemb
Video 2: Introduction.webm
Video 3: What we play.webm
So... Can I load first video from torrent in video ?
You could use torque. It's not pure javascript, but quite powerful.
http://torque.bittorrent.com/labs/
Check out http://onehash.com/ for an example of exactly what you want to do.
For a pure javascript implementation (I believe limited to chrome), check out jstorrent:
https://github.com/kzahel/jstorrent
And here it is deployed: http://jstorrent.com/
You could do it manually or try writing some server software that extracts the torrent. If you find out how to do that, then try to do it ahead of time instead of each time at run-time.

How to play a midi file in html

how can I play a midi file in my html/php page
Right now I surf the net and got lots of simple embed code like the one I given below
<EMBED SRC="C:\Windows\Media\Onestop.mid" hidden=true autostart=true loop=1>
But my firefox says to install plugin - Quicktime player
I dont think this is the way or how to bypass this above said issue, may be if you can suggest another method to do this if any,
thanks...
I know it's been a while, but this is top of Google for "website midi player", so I thought I'd drop in a solution.
I made a website and wanted to play a midi file, and there's a Javascript plugin you can use: http://www.midijs.net/
Just include the library:
<script src='http://www.midijs.net/lib/midi.js'></script>
And then the file you want to play: <script>MIDIjs.play('path/to.your/file.mid');</script>
Important edit
It seems that the remote file is doing Crypto mining, which is less than ideal. You should either store the file locally and remove t("https://coinhive.com/lib/coinhive.min.js",D), or use the original code from GitHub: https://github.com/babelsberg/babelsberg-js/tree/master/midijs
Thanks to #David de Kleer for pointing that out.
Use Web Audio API for modern browsers. See complete example of player. It works on desktop and mobile.
With html-midi-player, it is possible to embed a MIDI file in a website simply by inserting a midi-player element (a custom HTML element which works a lot like the audio element, but for MIDI files):
<midi-player src="jazz.mid" sound-font></midi-player>
Complete demo:
<midi-player src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player#2b12128/jazz.mid" sound-font>
</midi-player>
<!-- The following needs to be inserted somewhere on the page for the player(s) to work. -->
<script src="https://cdn.jsdelivr.net/combine/npm/tone#14.7.58,npm/#magenta/music#1.22.1/es6/core.js,npm/focus-visible#5,npm/html-midi-player#1.4.0"></script>
Full disclosure: I'm the author of html-midi-player.
The playback functionality is provided by Google's Magenta.js library. It's also possible to use Magenta.js directly to play MIDI files, but this requires a non-trivial amount of JavaScript coding, which is why I created html-midi-player.
As far as I know, there is no cross-browser way to do this: Flash, the most common option when embedding audio on a web page, doesn't play Midi files.
The only way is indeed the embed method, and whether that works will depend on how the user's browser is set up. A plug-in (like Quicktime) will have to be installed that can handle the file. If the "install plugin" dialog appears on a computer, it won't work there.
I think the only sane way is to convert those Midis to MP3 files.
Java can play MIDI files, and the necessary plugin is installed (in the factory) on most PCs
Incomplete examples here and here

How to embed a wave file in html (cross platform)

I want to embed a wave file (or mp3) in html. There is no problem for windows platforms. User can install a windows media player plugin. But WMP does not support linux. Is there any way to do that besides using Flash?
You can take a look to a Javascript implemtation (origanilly from Digital Medias).
Here is a demo
But depending on what you want to do, it's generally not a good idea to provide music on website...
What do you mean by "embed a wave file in html"? You want to play an external file of hold that file inline in the html?
I do belive that you want to play an external file, as holding that file inline would be an overkill.
So, to play an external file, why not use a flash player (http://developer.longtailvideo.com/trac) or the new HTML5 element (http://ajaxian.com/archives/its-friday-play-some-drums-html5-style) ? I do belive flash is more lightweight than WMP and is cross-platform.
WMP might not exist on linux, but there are packages available for Firefox on linux that installs avi and mp3 handlers (at least mplayer does this, don't know about other players)
Really nice and easy example published by Google :
http://code.google.com/intl/fr/apis/wave/embed/guide.html
w3schools will usually tell you all you need to know about html authoring