قم بإنشاء مشغل صوت HTML5 مخصص

خلال هذا البرنامج التعليمي أنا ذاهب ليكون تعريفك للصوت HTML5 ويظهر لك كيف يمكنك إنشاء الخاصة بك اللاعب.

إذا كنت ترغب في الحصول على اختصار ، يمكنك إلقاء نظرة على مشغل الصوت HTML5 الجاهز المتاح على Envato Market. فإنه يسمح لك بإنشاء قوائم التشغيل من مجموعة متنوعة من المصادر، ويأتي مع مجموعة واسعة من خيارات التخصيص.

يمكن أن تجد الكثير من الخبراء HTML5 أيضا في الاستوديو Envato لمساعدتك.

مقدمة

حتى الآن ، كان تنفيذ الصوت في مشروع ويب عملية شاقة تعتمد بشكل كبير على المكونات الإضافية لجهات خارجية مثل Flash. منذ سيئة السمعة عدم القبول فون من البرنامج المساعد والأخبار أن Adobe لم يعد يدعم الفلاش للجوال، تبحث العديد من المطورين في طرق أخرى لإدراج الصوت في مشاريعها. هذا هو المكان الذي يتدخل فيه الصوت HTML5 لحل المشكلة.

على الرغم من توفر HTML5 معياراً لتشغيل ملفات الصوت على شبكة الإنترنت، لا يزال في بداياته وما زال طريقا طويلاً قبل أن يمكن أن توفر كل شيء أن الإضافات الأخرى مثل فلاش الصوت يوفر. ومع ذلك ، بالنسبة لمعظم الحالات ، أكثر من كافية.

أغنية Html5 بسيطة

أن أبسط طريقة لتنفيذ الصوت إلى صفحة ويب باستخدام HTML5 استخدام العلامة الصوتية الجديدة. أضف هذا إلى مستند HTML5 مع الشفرة التالية:

1

<audio controls="controls">

2

  <source src="track.ogg" type="audio/ogg" />

3

  <source src="track.mp3" type="audio/mpeg" />

4

Your browser does not support the audio element.

5

</audio>

إذا كنت نلقي نظرة على التعليمات البرمجية أعلاه يمكنك مشاهدة أن قد أعلن <audio>العلامة وتعريف السمة ضوابط، بحيث لا نرى عناصر التحكم الافتراضية للاعب.</audio>

متداخلة في <audio>لدينا 2 'src' العلامات.</audio> واحد يعرف مسار MP3 والآخر يحدد شكل OGG. يتم استخدام التنسيق أغ لا سيما السماح للموسيقى للعب في فايرفوكس بسبب قضايا الترخيص لا يدعم فايرفوكس MP3 دون استخدام البرنامج المساعد. سلسلة النص المستعرض الخاص بك لا يدعم عنصر الصوت. يتيح للمستخدمين الذين لديهم متصفحات غير متوافقة معرفة ما يحدث.

مشغل الصوت HTML5 الافتراضي

سمات العلامة الصوتية Html5

فضلا عن الدعم العالمي HTML5 سمات العلامة كما تدعم مجموعة من السمات الفريدة لنفسها.

• autoplay - يمكن ضبط هذا على "true" أو تركه فارغًا "" لتحديد ما إذا كان يجب تشغيل المسار تلقائيًا بمجرد تحميل الصفحة.
• عناصر التحكم - كما هو موضح في المثال أعلاه ، يحدد هذا ما إذا كان يجب عرض عناصر التحكم الأصلية مثل "تشغيل ، إيقاف مؤقت" إلخ.
• حلقة--وهذا يمكن تعيين إلى "حلقة" ويحدد ما إذا كان المسار ينبغي اللعب مرة أخرى بمجرد الانتهاء من ذلك.
• التحميل المسبق--وهذا يمكن تعيينها إلى "تلقائي" (الذي يصف ما إذا كان ينبغي تحميل الملف في أقرب وقت تحميل الصفحة)، "بيانات التعريف" (التي توضح ما إذا كان عنوان المسار إلخ فقط بيانات التعريف، ينبغي أن تكون محملة)، 'بلا' (الذي يملي علينا أن المستعرض لا ينبغي تحميل الملف عندما تحميل الصفحة).
• src - يمكن رؤية ذلك أيضًا في المثال أعلاه ويحدد عنوان URL للموسيقى التي يجب تشغيلها بواسطة العلامة الصوتية.

تضخ ما يصل إلى أحد عشر

في الخطوات القليلة الأخيرة ، نظرنا في أبسط أشكال الصوت HTML5. عندما نبدأ في استخدام العلامة الصوتية مع جافا سكريبت يمكننا أن نبدأ بإنشاء بعض مشغلات الصوت حقاً مثيرة للاهتمام ومفيدة. دعونا نلقي نظرة على ما يمكن jQuery القيام به بالنسبة لنا. بعد لقد حددنا الوثيقة جاهزة في مسج، يمكننا إنشاء متغير صوت جديد للاحتفاظ بملف الصوت لدينا بسيطة مثل هذا:

1

var myaudio = new Audio('mysong.mp3');

هو حقا بهذه البساطة! ثم كلما أردنا تنفيذ إجراء على الصوت ونحن تشغيل باستخدام المتغير 'ميوديو'. في ما يلي قائمة بالإجراءات التي يمكننا اتخاذها باستخدام المتغير. دون ملاحظة عن هذه، سنقوم باستخدام بعض منهم في وقت لاحق توت عند إنشاء نحن لدينا مشغل الصوت...

1

myaudio.play(); - This will play the music.

2

myaudio.pause(); - This will stop the music.

3

myaudio.duration; - Returns the length of the music track.

4

myaudio.currentTime = 0; - This will rewind the audio to the beginning.

5

myaudio.loop = true; - This will make the audio track loop.

6

myaudio.muted = true; - This will mute the track

إذا كنت تريد دالة ليتم استدعاؤها بمجرد الانتهاء من الصوت اللعب ثم يمكنك استخدام 'myaudio.addEventListener('ended',myfunc)'--وهذا سوف يدعو 'myfunc()' بمجرد انتهاء الصوت.

إنشاء مشغل الصوت HTML5: الترميز

الآن بعد أن أصبحت لديك بعض الخلفية على صوت HTML5 وفهم المبادئ الأساسية ، حان الوقت لوضعها موضع التنفيذ وإنشاء مشغل صوت HTML5 مخصص. سوف تفوت مرحلة التصميم كما أنها خارج نطاق هذا البرنامج التعليمي، ولكن يمكنك تحميل التعليمات البرمجية المصدر المصاحب وتصفح عن طريق مديرية الأمن العام للحصول على فكرة عن كيفية وضعها معا.

يتكون الجزء العلوي من المستند من HTML5 doctype. Yahoos CSS Reset ، خط Google على الويب "Lobster" للعنوان. ثم لدينا أحدث jQuery وملف جافا سكريبت المخصص js.js. فنالي لدينا html5slider.js الذي يسمح لعرض نوع نطاق الإدخال HTML5، ونحن سوف تستخدم للغسيل الصوت فايرفوكس.

1

<!DOCTYPE html>

2

<head>

3

  <title>HTML5 Audio Tutorial</title>

4

	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">

5

	<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

6

	<link rel="stylesheet" type="text/css" href="css/style.css">

7

	<script src="http://code.jQuery.com/jQuery-latest.js" type="text/javascript"></script>

8

	<script type="text/javascript" src="js/js.js"></script>

9

	<script type="text/javascript" src="js/html5slider.js"></script>

10

</head>

بعد العنوان h1 لقد خلقت div مع فئة من "حاوية" و "التدرج". لقد خلقت فئة منفصلة من التدرج كهذا سوف يمكن إعادة استخدامها على بعض العناصر الأخرى. ضمن ".container" لقد أضفت صورة (والتي ستكون غلاف الألبوم) ، فإن علامات الربط الثلاث ستعمل كعناصر تحكم للاعب. فيما بينها ، ستجد حقل إدخال نطاق جهاز الغسيل / HTML5.

1

<body>

2

3

	<h1>HTML 5 Audio Player</h1>

4

5

	<div class="container gradient">

6

7

		<img class="cover" src="images/cover.jpg" alt="">

8

9

		<div class="player gradient">

10

11

			<a class="button gradient" id="play" href="" title=""></a>

12

			<a class="button gradient" id="mute" href="" title=""></a>

13

14

				<input type="range" id="seek" value="0" max=""/>

15

16

			<a class="button gradient" id="close" href="" title=""></a>

17

18

		</div><!-- / player -->

19

20

	</div><!-- / Container-->

21

</body>

22

</html>

إنشاء مشغل الصوت HTML5: أنماط

بدلاً من أن تذهب من خلال كل جانب من المغلق، أنا ذاهب إلى تعطيك لمحة عامة، وملاحظة أي أجزاء معينة قد تحتاج إيلاء الاهتمام ل.

في الكود أدناه ، قمت بإنشاء التدرج للاعب الذي تم إنشاؤه باستخدام محرر CSS التدرج. ثم لقد تم إنشاؤها للاعب ".container" مع بعض التحولات CSS3.

ستلاحظ أيضًا أنني استخدمت سمة تغيير حجم مربع CSS3 التي تم تعيينها على "مربع الحدود". هذا يسمح لحشو 10px حول الحاوية ليتم تضمينها في العرض الذي أعلنته ، في هذه الحالة 427 بكسل. إذا لم أكن قد اعتدت هذا الحشو ستضاف إلى 427px مما يجعل الحاوية أكبر مما أريد فعلا. أصبح ممارسة شائعة في هذه الأيام تطبيق * {حجم مربع: مربع الحدود؛} مما يجعل فعلا عن طريقة أكثر بديهية للتصميم.

لقد أضفت أيضًا بعض انتقالات CSS3 إلى ".coverlarge" للسماح ببعض التحولات اللطيفة عند فتح المشغل لأول مرة. قد تبدو CSS قليلاً في البداية ، لكن الكثير منها عبارة عن بادئات متصفح محددة للتأكد من أن مشغل الصوت يبدو ويعمل بنفس الطريقة في مختلف المتصفحات.

1

.gradient {

2

	border: 1px solid black;

3

4

	-webkit-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);

5

	-moz-box-shadow: inset 0 1px 0px rgba(255,255,255,.2);

6

	box-shadow: inset 0 1px 0px rgba(255,255,255,.2);

7

	background: #494949; /* Old browsers */

8

background: -webkit-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

9

10

	background: -moz-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

11

	background: -o-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

12

	background: -ms-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);

13

	background: linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%); /* W3C */

14

-image  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#494949', endColorstr='#0b0b0b',GradientType=0 ); /* IE6-9 */

15

}

16

17

.container {

18

	-webkit-transition: all .7s ease;

19

	-moz-transition: all .7s ease;

20

	-o-transition: all .7s ease;

21

	-ms-transition: all .7s ease;

22

	transition: all .7s ease;

23

	position: absolute;

24

	width: 427px;

25

	height: 70px;

26

27

	-webkit-border-radius: 10px;

28

	-moz-border-radius: 10px;

29

	border-radius: 10px;

30

31

	-webkit-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);

32

	-moz-box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);

33

	box-shadow: 0px 0px 13px rgba(0,0,0,.3),inset 0 1px 0px rgba(255,255,255,.2);

34

	top: 50%;

35

	left: 50%;

36

	margin: -214px 0px 0px -214px;

37

	padding: 10px;

38

39

	-webkit-box-sizing: border-box;

40

	-moz-box-sizing: border-box;

41

	-ms-box-sizing: border-box;

42

	box-sizing: border-box;

43

}

44

45

46

.containerLarge {

47

	height: 427px;

48

}

49

50

.cover {

51

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

52

	filter: alpha(opacity=0);

53

	opacity: 0;

54

	width: 398px;

55

	height: 10px;

56

	border: 2px solid black;

57

58

	-webkit-border-radius: 5px;

59

	-moz-border-radius: 5px;

60

	border-radius: 5px;

61

62

	-webkit-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);

63

	-moz-box-shadow: inset 0px 5px 5px rgba(0,0,0,1);

64

	box-shadow: inset 0px 5px 5px rgba(0,0,0,1);

65

}

66

67

.coverLarge {

68

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

69

	filter: alpha(opacity=100);

70

	opacity: 1;

71

	height: 398px;

72

73

	-webkit-transition: opacity .7s ease;

74

	-moz-transition: opacity .7s ease;

75

	-o-transition: opacity .7s ease;

76

	-ms-transition: opacity .7s ease;

77

	transition: opacity .7s ease;

78

79

	-webkit-transition-delay: .5s;

80

	-moz-transition-delay: .5s;

81

	-o-transition-delay: .5s;

82

	-ms-transition-delay: .5s;

83

	transition-delay: .5s;

84

}

كيف ينبغي أن ننظر مشغل الصوت في هذه المرحلة

بمجرد اكتمال حاوية المشغل ، فقد حان الوقت لإنشاء عناصر التحكم الفعلية. تم إنشاء غالبية الأزرار باستخدام النقوش المتحركة CSS

للأسف أي لا بعد دعم HTML5 نطاق الإدخال حتى لقد قررت عدم إظهار الغسيل الصوتية لمستخدمي إنترنت إكسبلورر. إذا كنت في وضع يمكنها من حيث أنه ليس من المقبول، يمكنك استخدام مربع التمرير في واجهة المستخدم مسج بطريقة مماثلة للطريقة لقد استعملت. لا يزال، أنا كنت اختار لمجرد إخفاء الغسيل، ومن ثم إدخال {عرض: none\9! هام؛} وهذا يخفي أساسا المدخلات من المستخدمين أي (راجع هذا الموضوع في "تجاوز سعة المكدس" لمزيد من المعلومات حول \9).

المشكلة مع منزلق النطاق HTML5 أن فقط بعض المستعرضات تدعم التصميم المخصصة لذلك؛ أساسا بكت المتصفحات (كروم وسفاري). سيعرض كل من Opera و Firefox شريط تمرير نطاق قياسيًا ، للأسف. إذا كنت بحاجة إلى تصميم مخصص عبر جميع المتصفحات ، فيمكنك استخدام شريط تمرير jQuery UI كما ذكر سابقاً. يمكنك مشاهدة التصميم المخصص للمتصفحات بكت في الإدخال:: شريط التمرير-بكت--سمة الإبهام.

1

.player {

2

	-webkit-box-sizing: border-box;

3

	-moz-box-sizing: border-box;

4

	-ms-box-sizing: border-box;

5

	box-sizing: border-box;

6

	position: absolute;

7

	width: 300px;

8

	bottom: 10px;

9

	width: 95%;

10

11

	-webkit-border-radius: 3px;

12

	-moz-border-radius: 3px;

13

	border-radius: 3px;

14

	padding: 5px;

15

}

16

17

.button {

18

	display: block;

19

	width: 34px;

20

	height: 34px;

21

	background-image: url(../images/sprite.png);

22

	background-repeat: no-repeat;

23

	float: left;

24

	margin-right: 5px;

25

}

26

27

#play {

28

	background-position: 6px 5px;

29

}

30

31

#pause {

32

	background-position: -32px 5px;

33

}

34

35

#mute {

36

	background-position: -63px 5px;

37

}

38

39

#muted {

40

	background-position: -106px 5px;

41

}

42

43

input[type="range"] {

44

	width: 250px;

45

	margin-top: -5px;

46

}

47

48

#close {

49

	float: right;

50

	background-position: -146px 5px;

51

	display: none;

52

}

53

54

.volume {

55

	position: absolute;

56

	height: 100px;

57

	width: 34px;

58

	border: 1px solid black;

59

	background-color: #242323;

60

	top: -97px;

61

	display: none;

62

}

63

input{

64

	display:none\9!important;

65

}

66

input[type="range"] {

67

	-webkit-appearance: none;

68

	border: 1px solid black;

69

	position: absolute;

70

	top: 18px;

71

	display: block;

72

	width: 63%;

73

	height: 15px;

74

75

	-webkit-border-radius: 20px;

76

	-moz-border-radius: 20px;

77

	border-radius: 20px;

78

	background-color: #242323;

79

	left: 90px;

80

81

	-webkit-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);

82

	-moz-box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);

83

	box-shadow: inset 0px 4px 4px rgba(0,0,0,.6);

84

}

85

86

input::-webkit-slider-thumb {

87

	-webkit-appearance: none;

88

	width: 20px;

89

	height: 20px;

90

	border:1px solid black;

91

92

	-webkit-border-radius: 10px;

93

	border-radius: 10px;

94

	background: #80e4df; /* Old browsers */

95

background: -webkit-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);

96

97

	background: -moz-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);

98

	background: -o-linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%);

99

	background: linear-gradient(top, #80e4df 0%, #75dbd6 13%, #5ec4bf 33%, #57bbb6 47%, #419d99 80%, #378f8b 100%); /* W3C */

100

}

إنشاء مشغل الصوت HTML5: مسج

بمجرد الانتهاء من التصميم والعلامة ، يكون الوقت قد حان لجعل اللاعب ينبض بالحياة. يمكننا القيام بذلك باستخدام jQascery إطار javascript. عندما أعلنت وثيقة مسج جاهزة، ونحن إنشاء بعض المتغيرات التي يمكننا تخزين كائنات jQuery لدينا.

1

container = $('.container');

2

	cover = $('.cover');

3

	play = $('#play');

4

	pause = $('#pause');

5

	mute = $('#mute');

6

	muted = $('#muted');

7

	close = $('#close');

8

	song = new Audio('music/track1.ogg','music/track1.mp3');

9

	duration = song.duration;

في متغير "الأغنية" أعلاه ، يمكنك أن ترى أننا أعلنا مسارين. أغ تنسيق MP3 وفايرفوكس للمتصفحات الأخرى. أقوم بعد ذلك بإنشاء جملة IF شرطية بحيث يمكننا التحقق مما إذا كان المستعرض يمكنه تشغيل ملفات MP3 أم لا. إذا كان يمكن، ثم نجعل المتغير "أغنية" المصدر المسار MP3-لم يكن ثم تقوم بتنسيق 'أغ'.

1

if (song.canPlayType('audio/mpeg;')) {

2

  	song.type= 'audio/mpeg';

3

  	song.src= 'music/track1.mp3';

4

	} else {

5

  	song.type= 'audio/ogg';

6

  	song.src= 'music/track1.ogg';

7

	}

الأشياء التالية التي سنقوم بإنشائها هي وظائف النقر التي ستسمح لنا بتشغيل الموسيقى وإيقافها مؤقتًا. أنا استخدم play (عمل الصوت) لبدء تشغيل الصوت، ثم استخدام replaceWith أسلوب مسج الذي يحل محل أساسا على زر التشغيل مع زر الإيقاف المؤقت.

لقد أضاف أيضا الفئات "كوفيرلارجي" و "كونتينيرلارجي" إلى "حاوية" و "الغطاء". كما أضاف لقد انتقالات CSS3 هذه في وقت سابق في CSS هذا سيتم إضافة انتقال لطيفة عند بدء تشغيل الصوت للعب. تعمل وظيفة "الإيقاف المؤقت" بطريقة مماثلة ، ولكن بدون الانتقالات. عند النقر عليه ، فإنه يستبدل زر الإيقاف المؤقت مع زر "تشغيل".

1

play.live('click', function(e) {

2

		e.preventDefault();

3

		song.play();

4

5

		$(this).replaceWith('<a class="button gradient" id="pause" href="" title=""></a>');

6

		container.addClass('containerLarge');

7

		cover.addClass('coverLarge');

8

		$('#close').fadeIn(300);

9

		$('#seek').attr('max',song.duration);

10

	});

11

12

	pause.live('click', function(e) {

13

		e.preventDefault();

14

		song.pause();

15

		$(this).replaceWith('<a class="button gradient" id="play" href="" title=""></a>');

16

17

	});

زر كتم الصوت وصامتة تعمل على نحو مماثل للعب ووقفه الأزرار، ولكن استدعاء الإجراءات ذات الصلة واستبدال الأزرار بالبدائل المناسبة.

1

mute.live('click', function(e) {

2

		e.preventDefault();

3

		song.volume = 0;

4

		$(this).replaceWith('<a class="button gradient" id="muted" href="" title=""></a>');

5

6

	});

7

8

	muted.live('click', function(e) {

9

		e.preventDefault();

10

		song.volume = 1;

11

		$(this).replaceWith('<a class="button gradient" id="mute" href="" title=""></a>');

12

13

	});

عندما ينقر المستخدم على زر "إغلاق" نطلق عليه jQuery لإزالة فئتي "containerLarge" و "coverLarge". سيخفي هذا الغطاء ويغلق المشغل احتياطيًا. ثم إيقاف اللاعب بواسطة استدعاء الإجراء pause() وإعادة تعيين كورينتيمي الصوت ليساوي 0. يؤدي هذا إلى تعيين المسار إلى البداية.

1

$('#close').click(function(e) {

2

		e.preventDefault();

3

		container.removeClass('containerLarge');

4

		cover.removeClass('coverLarge');

5

		song.pause();

6

		song.currentTime = 0;

7

		$('#pause').replaceWith('<a class="button gradient" id="play" href="" title=""></a>');

8

		$('#close').fadeOut(300);

9

	});

الآن حان الوقت للتحرك على الغسيل الصوتية التي أعطيت معرف "التماس". تتمثل الوظيفة الأولى في السماح لنا بنقل جهاز التنظيف إلى أي جزء من الصوت. ويتم ذلك عن طريق الكشف عن تغيير كلما شخص يتحرك الغسيل. ثم قمنا بتعيين song.currentTime لتتناسب مع جزء الأغنية التي انتقل إليها جهاز التنظيف. ونحن أيضا تعيين السمة الحد الأقصى تعكس مدة الأغنية.

1

$("#seek").bind("change", function() {

2

		song.currentTime = $(this).val();

3

		$("#seek").attr("max", song.duration);

4

	});

الجزء الأخير من مسج جعل الغسيل "#seek" الانتقال إلى جانب مدة الصوت. نحن نقوم بذلك عن طريق إضافة مستمع حدث إليه وعند تحديث وقت الصوت نسميه الوظيفة. أنا وضعت متغير من "curtime" للحصول على الوقت الحالي للأغنية. ثم تحديث قيمة الغسيل تعكس موقف الوقت الحالي من الصوت.

1

song.addEventListener('timeupdate',function (){

2

	curtime = parseInt(song.currentTime, 10);

3

		$("#seek").attr("value", curtime);

4

	});

وهناك لديك! لاعب HTML5 سمعية التي يمكن تنفيذها في الموقع الخاص بك أو التطبيق.

استنتاج

وكما ذكر آنفا، الصوت HTML5 لا تزال في بداياتها ولا يزال لديه مجال للتحسينات. في هذه اللحظة الصوت مصممة لعزف الموسيقى وسوف ولذلك دائماً دفق الصوت من الخادم الذي يؤدي في بعض المتصفحات لديها مشاكل مع تشغيل. إنها ليست مشكلة دائمًا ، ولكنها تعني أنها ستبدأ في بعض الأحيان في الدفع قبل تنزيل الصوت بالكامل.

يحتمل أن هذا يمكن أن يكون مشكلة إذا كنت تريد استخدام الصوت HTML5 لأشياء مثل تأثيرات الصوت في الألعاب أو تطبيقات الصوت المكثف. ولهذا السبب تأتي من أصدقائنا في جوجل مع أسلوب لتحسين نقاط الضعف علامة الصوت. قامت Google بإنشاء اقتراح وعرضه على W3C من أجل "Web Audio API". وهذا يثبت أن تكون أقوى كثيرا من HTML5 الأصلية الصوت، لكن المشكلة أنه في هذه المرحلة (هل يمكنك تخمين؟!) أنها لا تعمل إلا في كروم.

يمكنك قراءة المزيد عن واجهة برمجة تطبيقات Web Audio من Google ومشاهدة بعض الأمثلة على Google code أو الاطلاع على مواصفات الصوت على الويب.

أتمنى أن تكون قد استمتعت بالتعرف على صوت HTML5 وكيف يمكنك إنشاء لاعبين خاصين بك. لاعب بلدي يتضمن الضوابط الأساسية، ولكن لا يوجد شيء لإيقاف يمكنك إضافة المزيد من الميزات مثل التحكم بحجم الصوت، وحتى إضافة الحركات المخصصة الخاصة بك. مع قليل من الفكر والتجريب حقاً يمكنك إنشاء بعض مشغلات الصوت العظيم. تنزيل شفرة المصدر وسأتطلع إلى رؤية ما توصلت إليه!

وإذا كنت ترغب في مشاهدة المزيد من الخيارات للعمل مع مشغلات الصوت ووسائط الإعلام الأخرى في HTML5، تحقق من بنود الإعلام HTML5 Envato السوق.