{"id":5985,"date":"2016-12-25T13:41:10","date_gmt":"2016-12-25T10:41:10","guid":{"rendered":"https:\/\/www.karadere.com\/blog\/?p=5985"},"modified":"2016-12-25T13:41:10","modified_gmt":"2016-12-25T10:41:10","slug":"html5html5-ile-audio-muzik-calmak","status":"publish","type":"post","link":"https:\/\/www.karadere.com\/blog\/html5html5-ile-audio-muzik-calmak.html","title":{"rendered":"HTML5 ile audio m\u00fczik \u00e7almak"},"content":{"rendered":"<p>&lt;%@ Page Language=&#8221;VB&#8221; AutoEventWireup=&#8221;false&#8221; CodeFile=&#8221;Default.aspx.vb&#8221; Inherits=&#8221;_Default&#8221; %&gt;<\/p>\n<p>&lt;!DOCTYPE html&gt;<\/p>\n<p>&lt;html xmlns=&#8221;http:\/\/www.w3.org\/1999\/xhtml&#8221;&gt;<br \/>\n&lt;head runat=&#8221;server&#8221;&gt;<br \/>\n&lt;title&gt;Burhan KARADERE&lt;\/title&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;style media=&#8221;screen&#8221; type=&#8221;text\/css&#8221;&gt;<br \/>\n#backgroundaudio {<br \/>\ndisplay: block;<br \/>\nposition: fixed;<br \/>\nbottom: -43px;<br \/>\nleft: 5px;<br \/>\n-webkit-transition: all 1s ease-in-out;<br \/>\n-moz-transition: all 1s ease-in-out;<br \/>\n-ms-transition: all 1s ease-in-out;<br \/>\n-o-transition: all 1s ease-in-out;<br \/>\ntransition: all 1s ease-in-out;<br \/>\n}<br \/>\n#backgroundaudio:hover {<br \/>\nbottom: 0;<br \/>\n-webkit-transition: all 1s ease-in-out;<br \/>\n-moz-transition: all 1s ease-in-out;<br \/>\n-ms-transition: all 1s ease-in-out;<br \/>\n-o-transition: all 1s ease-in-out;<br \/>\ntransition: all 1s ease-in-out;<br \/>\n}<br \/>\n#backgroundaudio audio {<br \/>\nbackground: #ffffff;<br \/>\npadding: 5px;<br \/>\ndisplay: table-cell;<br \/>\nvertical-align: middle;<br \/>\nheight: 43px;<br \/>\nz-index: 9998;<br \/>\n}<br \/>\n#backgroundaudio i {<br \/>\nfont-size: 40px;<br \/>\ndisplay: block;<br \/>\nbackground: #ffffff;<br \/>\npadding: 5px;<br \/>\nwidth: 50px;<br \/>\nfloat: none;<br \/>\nmargin-bottom: -1px;<br \/>\nz-index: 9999;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n&lt;div id=&#8221;backgroundaudio&#8221;&gt;<br \/>\n&lt;i class=&#8221;icon-volume-up&#8221;&gt;&lt;\/i&gt;<br \/>\n&lt;audio autoplay=&#8221;&#8221; controls=&#8221;&#8221; loop=&#8221;&#8221; preload=&#8221;&#8221;&gt;<br \/>\n&lt;source src=&#8221;images\/sounds\/001.ogg&#8221; type=&#8221;audio\/ogg&#8221;&gt;&lt;\/source&gt;<br \/>\n&lt;source src=&#8221;images\/sounds\/001.mp3&#8243; type=&#8221;audio\/mpeg&#8221;&gt;&lt;\/source&gt;<br \/>\nBu internet taray\u0131c\u0131s\u0131 ses m\u00fczikdosyas\u0131n\u0131 oynatmay\u0131 desteklemiyor.&lt;br \/&gt;<br \/>\nYour browser does not support the audio element.<br \/>\n&lt;\/audio&gt;<br \/>\n&lt;\/div&gt;<\/p>\n<p>&nbsp;<\/p>\n<p>&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>veya\u00a0<\/strong><\/p>\n<p>&lt;audio&gt;<br \/>\n&lt;source src=&#8221;images\/sounds\/001.ogg&#8221; type=&#8221;audio\/ogg&#8221;&gt;&lt;\/source&gt;<br \/>\n&lt;source src=&#8221;images\/sounds\/001.mp3&#8243; type=&#8221;audio\/mpeg&#8221;&gt;&lt;\/source&gt;<br \/>\n&lt;source src=&#8221;images\/sounds\/001.webm&#8221; type=&#8221;audio\/webm&#8221;&gt;&lt;\/source&gt;<br \/>\nBu internet taray\u0131c\u0131s\u0131 ses m\u00fczikdosyas\u0131n\u0131 oynatmay\u0131 desteklemiyor.&lt;br \/&gt;<br \/>\nYour browser does not support the audio element.<br \/>\n&lt;\/audio&gt;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>veya<\/strong><\/p>\n<p>&lt;audio \u00a0autoplay loop &gt;<br \/>\n&lt;source src=&#8221;images\/sounds\/001.ogg&#8221; type=&#8221;audio\/ogg&#8221;&gt;&lt;\/source&gt;<br \/>\n&lt;source src=&#8221;images\/sounds\/001.mp3&#8243; type=&#8221;audio\/mpeg&#8221;&gt;&lt;\/source&gt;<br \/>\n&lt;source src=&#8221;images\/sounds\/001.webm&#8221; type=&#8221;audio\/webm&#8221;&gt;&lt;\/source&gt;<br \/>\nBu internet taray\u0131c\u0131s\u0131 ses m\u00fczikdosyas\u0131n\u0131 oynatmay\u0131 desteklemiyor.&lt;br \/&gt;<br \/>\nYour browser does not support the audio element.<br \/>\n&lt;\/audio&gt;<\/p>\n<p>javascript ile play etmek<\/p>\n<p>&lt;script type=&#8221;text\/javascript&#8221;&gt;<br \/>\nfunction MuzikCal(){<br \/>\nconsole.log(&#8220;www.karadere.com sitesi y\u00fcklenme i\u015flemi tamamland\u0131.&#8221;);<br \/>\nconsole.log(&#8220;Muzik \u00c7al\u0131n\u0131yor&#8230;&#8221;);<br \/>\nvar v = document.getElementsByTagName(&#8220;audio&#8221;)[0];<br \/>\nv.play();<br \/>\n}<br \/>\n&lt;\/script&gt;<\/p>\n<p>&lt;\/head&gt;<\/p>\n<p>&lt;body class=&#8221;extended&#8221; onload=&#8221;MuzikCal();&#8221; &gt;<\/p>\n<p>&nbsp;<\/p>\n<h2>Audio Attribute Specification<\/h2>\n<p>The HTML5 audio tag can have a number of attributes to control the look and feel and various functionalities of the control:<\/p>\n<table class=\"table table-bordered\">\n<tbody>\n<tr>\n<th>Attribute<\/th>\n<th>Description<\/th>\n<\/tr>\n<tr>\n<td>autoplay<\/td>\n<td>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.<\/td>\n<\/tr>\n<tr>\n<td>autobuffer<\/td>\n<td>This boolean attribute if specified, the audio will automatically begin buffering even if it&#8217;s not set to automatically play.<\/td>\n<\/tr>\n<tr>\n<td>controls<\/td>\n<td>If this attribute is present, it will allow the user to control audio playback, including volume, seeking, and pause\/resume playback.<\/td>\n<\/tr>\n<tr>\n<td>loop<\/td>\n<td>This boolean attribute if specified, will allow audio automatically seek back to the start after reaching at the end.<\/td>\n<\/tr>\n<tr>\n<td>preload<\/td>\n<td>This attribute specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.<\/td>\n<\/tr>\n<tr>\n<td>src<\/td>\n<td>The URL of the audio to embed. This is optional; you may instead use the &lt;source&gt; element within the video block to specify the video to embed<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Handling Media Events<\/h2>\n<p>The HTML5 audio and video tag can have a number of attributes to control various functionalities of the control using Javascript \u2212<\/p>\n<table class=\"table table-bordered\">\n<tbody>\n<tr>\n<th>Event<\/th>\n<th>Description<\/th>\n<\/tr>\n<tr>\n<td>abort<\/td>\n<td>This event is generated when playback is aborted.<\/td>\n<\/tr>\n<tr>\n<td>canplay<\/td>\n<td>This event is generated when enough data is available that the media can be played.<\/td>\n<\/tr>\n<tr>\n<td>ended<\/td>\n<td>This event is generated when playback completes.<\/td>\n<\/tr>\n<tr>\n<td>error<\/td>\n<td>This event is generated when an error occurs.<\/td>\n<\/tr>\n<tr>\n<td>loadeddata<\/td>\n<td>This event is generated when the first frame of the media has finished loading.<\/td>\n<\/tr>\n<tr>\n<td>loadstart<\/td>\n<td>This event is generated when loading of the media begins.<\/td>\n<\/tr>\n<tr>\n<td>pause<\/td>\n<td>This event is generated when playback is paused.<\/td>\n<\/tr>\n<tr>\n<td>play<\/td>\n<td>This event is generated when playback starts or resumes.<\/td>\n<\/tr>\n<tr>\n<td>progress<\/td>\n<td>This event is generated periodically to inform the progress of the downloading the media.<\/td>\n<\/tr>\n<tr>\n<td>ratechange<\/td>\n<td>This event is generated when the playback speed changes.<\/td>\n<\/tr>\n<tr>\n<td>seeked<\/td>\n<td>This event is generated when a seek operation completes.<\/td>\n<\/tr>\n<tr>\n<td>seeking<\/td>\n<td>This event is generated when a seek operation begins.<\/td>\n<\/tr>\n<tr>\n<td>suspend<\/td>\n<td>This event is generated when loading of the media is suspended.<\/td>\n<\/tr>\n<tr>\n<td>volumechange<\/td>\n<td>This event is generated when the audio volume changes.<\/td>\n<\/tr>\n<tr>\n<td>waiting<\/td>\n<td>This event is generated when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Following is the example which allows to play the given video \u2212<\/p>\n","protected":false},"excerpt":{"rendered":"<p>&lt;%@ Page Language=&#8221;VB&#8221; AutoEventWireup=&#8221;false&#8221; CodeFile=&#8221;Default.aspx.vb&#8221; Inherits=&#8221;_Default&#8221; %&gt; &lt;!DOCTYPE html&gt; &lt;html xmlns=&#8221;http:\/\/www.w3.org\/1999\/xhtml&#8221;&gt; &lt;head runat=&#8221;server&#8221;&gt; &lt;title&gt;Burhan KARADERE&lt;\/title&gt; &lt;\/head&gt; &lt;body&gt; &lt;style media=&#8221;screen&#8221; type=&#8221;text\/css&#8221;&gt; #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; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[1],"tags":[2768,1139,1140,1142,1177,1518],"class_list":["post-5985","post","type-post","status-publish","format-standard","hentry","category-genel","tag-calmak","tag-html-2","tag-html-5","tag-html5","tag-ile","tag-muzik","has-post-title","has-post-date","has-post-category","has-post-tag","has-post-comment","has-post-author",""],"aioseo_notices":[],"views":1510,"_links":{"self":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts\/5985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/comments?post=5985"}],"version-history":[{"count":1,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts\/5985\/revisions"}],"predecessor-version":[{"id":5986,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/posts\/5985\/revisions\/5986"}],"wp:attachment":[{"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/media?parent=5985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/categories?post=5985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.karadere.com\/blog\/wp-json\/wp\/v2\/tags?post=5985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}