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

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

Related

Node-Webkit: How to play AVI videos?

I am trying to make a simple node-webkit app that lets you play .avi videos (which should work both on windows and mac). Is there a way to do this with node-webkit?
It is unlikely you will be able to just do this with Node-Webkit. Especially since the official webkit does not support AVI. Your best bet is to use an external application like libav (avplay) or use node to serve a webpage that has a player capable of playing the content and just let the users browser do the work. (Flash is likely still the best way to go, video.js is a good choice)
The alternative is to convert the video to one of the supported formats. I would recommend mp4. (Once again libav (avconv) comes in handy here.) This still assumes that Node-Webkit has implemented full HTML5 support. (I am not sure what they have completed but I am guessing it supports the video element)
Is AVI supported in Chrome (not Chromium) ?
If it is you have to change the libffmpegsumo.so in nw for the one in Chrome (try to use the same version).
libffmpegsumo.so is called ffmpegsumo.dll in Windows
The file file is in the same folder of the nw executable
to get the file download google chrome and go to %USER%/Google Chrome/ (or something like that) and you'll find the file in the same folder of the google-chrome executable
You can wcjs-player to play any format video which supported by VLC. It plays any video without any lags as in-built player.
To support my above claim, I have following points:
Building NW (by compiling source code) with various FFMPEG codec flags given at nw github site, doesn't help, in getting ffmpegsumo.dll which can play avi file format.
wcjs-player uses VLC libraries, which support all video played by VLC does.
Its better than using any nw plugin, as internally wcjs-player using VLC does similar job as HTML native video support .
Even if you suceed playing avi files, sometimes supported videos file format may not get played like most ironically mp4 file itself.
Apart from this, Teewe Theatre, Popcorn Time , Butter are among NW based media player using wcjs-player. It hardly increased 30 MB size of overall app size.

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

Dynamically Playing MP3 files downloaded with AJAX

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.

Embed windows media player in HTML web page with playlist feature

I want to embed an audio player into my web page with a playlist feature. How can I do this?
A simple, clean way of doing it via Jquery (one of many options out there): http://www.happyworm.com/jquery/jplayer/
The (somewhat clunky) Microsoft way of doing it: http://www.mediacollege.com/video/format/windows-media/streaming/embed.html
Using an audio player that's not proprietary is good UI practice. For instance, Flash isn't available on all user's computers. WMV (which the windows example uses) is a very windows-centric format, and may not be supported to some linux or mac users. Many people don't run quick time, so the AAC format might not be a great format to embed.
You should probably use Windows Media Metafiles.

Embed MP4 in HTML using flash-player

Can I embed MP4-files streaming using a flash-player? I find several places it is mentioned, but some places also mention that flash-10 might be a requirement, it might now work well for streaming etc...
Are there any limitations I should be aware of - and which embeddable flash-player works well?
Yes you can. Flash 9.0.115 is required.
Flowplayer is my favourite. Free and opensource.
MP4 files need to be encoded or fixed using a utility or server code to be fast start - the header information at the beginning of the file rather than the end.
The program to move the metadata to the front of the file is here:
http://rndware.info/products/metadata-mover.html
Use Video.Js .. http://videojs.com/ .. The best Html5 Video player.
Here are a couple of players:
MediaElement: Supports HTML5 and Flash (automatically, if browser needs it). Free and works well for basic configurations. Warning: This project has A LOT of open issues so if your configuration is having problems you're out of luck
f4player: It one of the smallest available at only 10kb and free under the GPL license. It supports flv, f4v, mp4, stream and live stream. It has not been updated in a while though.
Video.js: Don't let the super lame project name fool you. This project is awesome and the best supported of the options. We've been using it on production software for years with no issues. This is your best bet.
I think this also helpfull with video on website:
Jwplayer
www.longtailvideo.com/players/jw-flv-player/
I know also a great video player who supported MP4, Flv and MP4 format: it's KAWA Player ->
http://monmoulin.fr/kawa_player_video_flash.html
Of course, it's totally free!
here's an open source player
http://hdflvplayer.net/
for supporting MP4 videos and more amazing features!
FlashFox works well and is very small. See https://code.google.com/p/flashfox/
Download from http://flashfox.googlecode.com/svn/trunk/ and find usage information on http://v4e.thewikies.com/. You need to provide a full URL for the video, even if it's local.