Embed mp3 in html - html

I used this code for embed a mp3 file to html:
<EMBED SRC="mp3 link" HEIGHT=60 WIDTH=300>];
the problem is that the browser download the file and than he play it,
there is any way for do it in buffer or something like this?
because i want the user will not wait.

For browsers that support HTML 5 you can use this:
<audio src="song.mp3" controls="controls">
Your browser does not support the audio element.
</audio>
Otherwise you'd have to use JQuery as suggested above, or a flash audio player.

Google has a good player :
<embed type="application/x-shockwave-flash" flashvars="audioUrl=MP3_FILE_URL" src="http://www.google.com/reader/ui/3523697345-audio-player.swf" width="400" height="27" quality="best"></embed>

Use the audio element of HTML5:
<audio src="[mp3 link]" preload controls></audio>

Related

How can I add control to my embed audio?

I added some music to my website that starts when you load it. I also want to give the option to pause/unpause it. What must I do to add control?
<embed controls autostart="true" height="0" loop="true" src="URL://music-file" width="0" />
Use HTML5
A simple way to achieve this is, to use HTML5 and it's audio tag.
<audio controls autoplay>
<source src="MP3 PATH" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

How to play google drive mp3 file using html audio tag?

My aim is to play the mp3 file from the google drive. I am using the plugin MediaElement js. The reference I got is https://www.portalzine.de/dev/html5/hosting-mp3-files-on-google-drive-html5-audio-player/
This is working in chrome, Mozilla firefox but not in IE-11, safari and opera. I want this to be play in all browsers. Please give me the suggestions....
1. URL for the audio file (anyone can view)
https://drive.google.com/file/d/1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-/view?usp=sharing
2. Extract the id from URL
1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-
3. URL for playing the audio file
https://docs.google.com/uc?export=download&id={id}
example:
https://docs.google.com/uc?export=download&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-
4. URL for downloading the audio file
https://drive.google.com/uc?authuser=0&id={id}&export=download
example:
https://drive.google.com/uc?authuser=0&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-&export=download
5. HTML for playing audio:
<audio controls="controls">
<source src="https://docs.google.com/uc?export=download&id={id}">
</audio>
example:
<audio controls="controls">
<source src="https://docs.google.com/uc?export=download&id=1nQklEicsMeGBnuk0vv6zkHtXtyGy10S-">
</audio>
6. HTML for downloading audio:
<a href="https://drive.google.com/uc?authuser=0&id={id}&export=download"/>Download
example:
<a href="https://drive.google.com/uc?authuser=0&id=1nQklEicsMeGBnuk0vv6zkHtXtyGyO9S-&export=download"/>Download
In another thread on another page someone wrote the only solution that has worked for me:
If you share an MP3 by link, you obtain a link like this
https://drive.google.com/file/d/XXXXXXXXXXXXXXXXXX/view?usp=sharing
where XXXXXXXXXXXXXXXXXX is the ID of your MP3 file. Then you can obtain a direct link to this audio by
http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX
In particular you can use
<audio controls>
<source src="http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX" type="audio/mp3">
<p>Your browser does not support HTML5 audio :(</p>
</audio>
The first link is the one you normally get, the other link is what you want to use with
Try to think of this as HTML code:
<audio controls>
<source src="http://docs.google.com/uc?export=open&id=XXXXXXXXXXXXXXXXXX" type="audio/mp3">
</audio>
Make sure you convert that link right and it will work!
I'm using Direct Link Creator plugin of Google Drive and get the link easily. Here's an example.
<audio controls="controls">
<source src="https://docs.google.com/uc?export=download&id=0B_ETxiqrp0SzbF9VQ3JCS2hnSlU">
</audio>
<video controls="controls">
<source src="https://drive.google.com/uc?export=download&id=0B0JMGMGgxp9WMEdWb1hyQUhlOWs" type='video/mp4' />
</video>
I was trying to accomplish this inside the SSML audio tag for Actions on Google. None of the above steps seemed to work. I finally found a solution.
1) Get the file ID from the sharing link
https://drive.google.com/file/d/your_file_id/view?usp=sharing
2) Construct the direct link
http://docs.google.com/uc?export=open&id=your_file_id
3) Paste the direct link into a web browser and hit enter
4) Copy the resulting URL after you have been redirected by your browser
Note: This will be a much longer URL that looks something like this:
https://doc-XX-XX-docs.googleusercontent.com/docs/securesc/XXXXXXXXXXXXXXXXXXXXX/XXXXXXXXXXXXXXXXXXXX/000000000000000/0000000000000000000000/*/your_file_id?e=open
Using this final URL is the only way I could get my uploaded sound files to work with Actions on Google.

<audio> tag for mp3 doesn't really work on Chrome

First of all here is the website I'm currently coding :
http://www.clairereviens.com/
On each button, there is one tag for one mp3 sample. All the mp3 are playing perfectly with Safari, but with Chrome only a few buttons are working.
I tested with type audio/mp3 and audio/mpeg, but it doesn't change.
Thanks guys
Its too late but this might help anyone in future.Both audio of mp3 quality(128 and 320 Kbps) and video of mp4(in iFrame) are working fine in the google chrome version 55.0.2883.87.
<audio controls="controls" src="mydriveaddress\test.mp3" autoplay>
</audio>
<iframe src="mydriveaddress\test2.mp4" height="300" width="300" allowfullscreen=""></iframe>
Some of the buttons are not working because you are specifying the file type wrong. All the audio files are mp3 but you're specifying some of them as mpeg.
You need to change this:
<source src="sons/xxx.mp3" type="audio/mpeg">
to this:
<source src="sons/xxx.mp3" type="audio/mp3">
For all of them.
I had the same problem with Google Chrome. It's more of like a version problem of chrome. To fix that re-encode the MP3 files to a lower bitrate using Audacity or other Media Converters.
For more info: https://stackoverflow.com/a/32719143/8009667

How to embed an swf file having controls like video/audio Tag?

I tried searching various ways of embedding my swf files in to the browser using video, object and the embed tags.
video tag did not let me run the swf.
This is what i had tried :
<video controls>
<object data="video.swf" width="320" height="240">
<embed src="video.swf" width="320" height="240">
</object>
</video>
I also tried:
<video controls>
<object data="video.swf" width="320" height="240"></object>
</video>
and
But found no luck.
Then i tried the embed and the object tags:
<embed src="video.swf" type="application/x-shockwave-flash" height="200" width="200">
<object type="application/x-shockwave-flash" data="video.swf" height="200" width="200">
Both worked fine.
But i want to have the controls [play/pause/sound controls] that comes along with the video tag.
Is there any way i can have the controls along with embed or object tags ?
Or can i embed my swf file into the video tag ?
Any help would be appreciated.
If you'd like controls and you're trying to embed your own SWF File, you'll need to build the player yourself. Either through flash or by using JavaScript functions to send instructions into the flash file.
I'm assuming you're doing this for cross browser compatibility, If working in Actionscript doesn't sound like much fun (hint: it's not), you could use something like videoJS which would provide you with a fully featured player. I personally use MediaElement which I've found to suit my needs.

media files do not play with hidden property set to true of embed tag

Here is my embed tag
<embed src="http://localhost:8084/MIS/js/status_no.mp3" hidden="true" autostart="true" loop="false" class="playSound">
When I remove hidden property, sound gets played but when i set hidden property to true, sound does not play. I do not want to show the player to the user.
<audio>
<source src="../js/Alarm_Buzzer.ogg" type="audio/ogg"></source>
</audio>
This worked for me in both chrome as well as firefox. Firefox did not support mp3 files but chrome did.
You can try to hide it with CSS:
.playSound { display: none; }
Also I'd like to suggest using the audio tag, it's meant for this type of content.
I would recommend converting your code into something like this and this works on all browsers
<audio autoplay>
<source src="http://localhost:8084/MIS/js/status_no.ogg" type="audio/ogg">
<source src="http://localhost:8084/MIS/js/status_no.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
This code will work on all browsers, it will also be hidden and will start automatically.
If you add controls="controls" in audio tag then the audio player will be visible to the user.
so for your case just don't add controls.
<audio src="http://a.tumblr.com/tumblr_mfezft44rf1rge0duo1.mp3" autoplay="autoplay" loop="false" class="playSound"></audio>
Hope this helps!
<embed src="https://www.youtube.com/v/watch?v=KA_8oaTpxac&autoplay=1&loop=1" type="application/x-shockwave-flash"
wmode="transparent" height="1" width="1">
I think this works but note : Very important
if video on you tube : the line is :
https://www.youtube.com/watch?v=vid number
but you have to write it in this form in the code
https://www.youtube.com/v/watch?v=vid id
and will work fine