Ara 25 2016

HTML5 ile audio müzik çalmak

<%@ Page Language=”VB” AutoEventWireup=”false” CodeFile=”Default.aspx.vb” Inherits=”_Default” %>

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Burhan KARADERE</title>
</head>
<body>
<style media=”screen” type=”text/css”>
#backgroundaudio {
display: block;
position: fixed;
bottom: -43px;
left: 5px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#backgroundaudio:hover {
bottom: 0;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#backgroundaudio audio {
background: #ffffff;
padding: 5px;
display: table-cell;
vertical-align: middle;
height: 43px;
z-index: 9998;
}
#backgroundaudio i {
font-size: 40px;
display: block;
background: #ffffff;
padding: 5px;
width: 50px;
float: none;
margin-bottom: -1px;
z-index: 9999;
}
</style>
<div id=”backgroundaudio”>
<i class=”icon-volume-up”></i>
<audio autoplay=”” controls=”” loop=”” preload=””>
<source src=”images/sounds/001.ogg” type=”audio/ogg”></source>
<source src=”images/sounds/001.mp3″ type=”audio/mpeg”></source>
Bu internet tarayıcısı ses müzikdosyasını oynatmayı desteklemiyor.<br />
Your browser does not support the audio element.
</audio>
</div>

 

</body>
</html>

 

veya 

<audio>
<source src=”images/sounds/001.ogg” type=”audio/ogg”></source>
<source src=”images/sounds/001.mp3″ type=”audio/mpeg”></source>
<source src=”images/sounds/001.webm” type=”audio/webm”></source>
Bu internet tarayıcısı ses müzikdosyasını oynatmayı desteklemiyor.<br />
Your browser does not support the audio element.
</audio>

 

veya

<audio  autoplay loop >
<source src=”images/sounds/001.ogg” type=”audio/ogg”></source>
<source src=”images/sounds/001.mp3″ type=”audio/mpeg”></source>
<source src=”images/sounds/001.webm” type=”audio/webm”></source>
Bu internet tarayıcısı ses müzikdosyasını oynatmayı desteklemiyor.<br />
Your browser does not support the audio element.
</audio>

javascript ile play etmek

<script type=”text/javascript”>
function MuzikCal(){
console.log(“www.karadere.com sitesi yüklenme işlemi tamamlandı.”);
console.log(“Muzik Çalınıyor…”);
var v = document.getElementsByTagName(“audio”)[0];
v.play();
}
</script>

</head>

<body class=”extended” onload=”MuzikCal();” >

 

Audio Attribute Specification

The HTML5 audio tag can have a number of attributes to control the look and feel and various functionalities of the control:

Attribute Description
autoplay This boolean attribute if specified, the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data.
autobuffer This boolean attribute if specified, the audio will automatically begin buffering even if it’s not set to automatically play.
controls If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback.
loop This boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end.
preload This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
src The URL of the audio to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed

Handling Media Events

The HTML5 audio and video tag can have a number of attributes to control various functionalities of the control using Javascript −

Event Description
abort This event is generated when playback is aborted.
canplay This event is generated when enough data is available that the media can be played.
ended This event is generated when playback completes.
error This event is generated when an error occurs.
loadeddata This event is generated when the first frame of the media has finished loading.
loadstart This event is generated when loading of the media begins.
pause This event is generated when playback is paused.
play This event is generated when playback starts or resumes.
progress This event is generated periodically to inform the progress of the downloading the media.
ratechange This event is generated when the playback speed changes.
seeked This event is generated when a seek operation completes.
seeking This event is generated when a seek operation begins.
suspend This event is generated when loading of the media is suspended.
volumechange This event is generated when the audio volume changes.
waiting This event is generated when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

Following is the example which allows to play the given video −

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

By • Genel • 0 • Tags: , , , , ,