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
Related
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.
I am planning to build a JavaScript/HTML5 app, and wrap it with phonegap to be installed on an android tablet.
In it, I want to show a video file.
Is it just a matter of creating an index.html file, and putting a mymov.ogv file in the same directory, and then using:
<video src="mymov.ogv"...>
and it will work on Android?
I have read about some problems with this, but my quest got me confused.
What are the caveats, if any?
PS: the video should be packaged within phonegap, such that the video is shown when the app is not connected to wifi. So it's a local file.
PPS: Since it's for internal use, I am able to choose a particular modern android version (if that makes any difference). There is no need to support old android versions whatsoever.
According to this resource: http://caniuse.com/ogv There is not support for ogv format in Android. Remember that Phonegap applications are just display in a rapped browser window-- So if the browser doesn't support it, you can't use it. Whether the video is on-board the device or streamed, doesn't matter.
You can certainly embed with the tag, but you might want to use the associated Javascript API to provide some control over the video.
I am working on a project related to vintage web designs. I would like to embed and autoplay a midi file but:
It doesen't work on IOS (I tried with my ipad)
On Firefox, sometimes the tune is not played, I don't know why.
Does the midi player depends on the browser or a plugin?
Can I find a univeral alternative to play my tune?
I am using the <embed> tag this way:
<embed src="tune.mid" hidden="true" autostart="true" autoplay="true">
I've referenced this question before and fell upon the answer of using the library midijs.
However, since that lib now has a bitcoin miner included, I've made a variant without the mining code:
https://kitchwww.github.io/midi/midi.js
It can be included and used in exactly the same way:
<script type='text/javascript' src='https://kitchwww.github.io/midi/midi.js'></script>
<a href="#" onClick="function(){
MIDIjs.initAll();
MIDIjs.play('path/to/yoursong.midi');}">Play My Song</a>
EDIT: updated to include an init function to be called on a User Gesture, as all audio must now be initiated from one.
Yes, the embed tag is reserved for plugins, which Mobile Safari doesn't support.
Take a look at HTML5 audio tag, which is supported by most browsers.
But please don't play music on a webpage... it's annoying - most either listens to music, have the speakers turned off, or are at the office.
Your HTML is OK. The problem is that some lower class browsers have lost the ability to play midi files. They have to install an add on. Real Player used to be a good solution, but now they are pushing a cloud subscription. There are plenty of other midi players around, but the users have to install one.
Browsers dropped support for playing MIDI files natively over time. You might want to try MIDI.js, a JavaScript based cross browser library.
Add the MIDI.js script to your webpage:
<script type='text/javascript' src='http://www.midijs.net/lib/midi.js'></script>
And then add a link to start playing:
Play My Song
Take a look at http://www.midijs.net for details.
For mid, and kar files, I suggest using vanBasco midi player as your default player. See the source on http://midkar.com/blues/blues_01.html
To Embed;
embed src="musicfile.mid" width=144 height=60 autostart=true repeat=false loop=false
(replace the "musicfile.mid" with the name of your midi file)
Use the HTML5 Audio tag. But like The guy before me said.... please reconsider music on your page.
<audio src="example.midi" preload="auto" autoplay="autoplay"></audio>
Well, here it is Aug 13, 2017 and don't you know embedding a bg midi on a web page is still a mystery.
In fact I'm pretty certain it can't even be done anymore (except IE's bgsound src, which still works fine for me).
But as for Firefox and Chrome, the solution provided by jofeu is a great work-around.
I only wish there was a way to embed so the midi just starts playing on page load, without having to click anything. I guess those days are gone.
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.
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