img

ساخت یک پخش کننده فایل های صوتی سفارشی…

/
/
/
از ویژگی های صوتی HTML5 برای ساخت یک پخش کننده فایل های صوتی سفارشی و پادکست از طریق وب سایت ها استفاده کنید.

۱- شروع کار با HTML
یک فایل HTML بسازید و برای تعریف HTML اصلی و ساختار سند ، کد مربوطه را وارد کنید. این کد، سند HTML را ترکیب می کند و بخش عنوان را شامل می شود. عنوان سند را توصیف می کند و به منابع خارجی ساخته شده به عنوان CSS و JavaScript نیاز دارد. از متن هم برای ذخیره سازی عناصر محتوای مرئی استفاده می شود. این عناصر در مرحله بعدی اضافه می شوند.

<!DOCTYPE html>
<html>
<head>
<title>Playlist</title>
<link rel=”stylesheet” type=”text/css”
href=”styles.css” />
<script type=”text/javascript” src=”code.
js”></script>
</head>
<body> </body>
</html>

۲- تعریف پخش کننده صوتی
پخش کننده صوتی از یک ظرف تشکیل است که عناصر تکی را برای نمایش عنوان و کنترل های تعامل در خود نگه می دارد. نمایش عنوان اولین کودک در ظرف پخش کننده صوتی است، هر کنترل از شماره شناسایی خاص دارد که برای اضافه کردن تعامل ها می تون در JavaScript از آن ها استفاده کرد.

<div data-player=”music”>
<span></span>
<span id=”back”>&laquo;</span>
<span id=”pause”>||</span>
<span id=”play”>&gt;</span>
<span id=”next”>&raquo;</span>
</span>

۳- شروع کار با فایل CSS
زمانی که HTML کامل شد ، می توانیم برای ذخیره سازی قوانین نمایش ، یک فایل جدید به نام»styles.css» بسازیم. اولین قوانین این فایل ، سند مرئی را نشان می دهند که به طور پیش فرض با یک متن سیاه و سفید در پیش زمینه نشان داده می شوند.
یک فونت پیش فرض نیز برای عناصر کودک در صفحه جانشین انتخاب می شود.

html,body{
display: block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: Helvetica, sans-serif;
background: #000;
color: #fff; }

۴- سبک پخش کننده
پخش کننده صوتی از ظرف پخش کننده دده و عناصر کودک آن تشکیل شده است. اندازه فونت پیش فرض و پهنا برای این عنصر تعیین می شود ، در حالی که عناصر کودک طوری عناصر کودک برای لایه گزاری و مرز نشان مشخص می شوند ، به طوری که دکمه ها قابل دیدن باشند. ویژگی های خاص اولین کودک در آن تعیین می شوند ،به طوریکه این کودک در بالای کنترل ها قرار بگیرد.

[data-player]{
width: 20em;
font-size: 2em; }
[data-player] > *{
border: 1px solid #fff;
padding: .5em; }
[data-player] > *:first-child{
display: block;
border: 0;
width: 100%; }

۵- ساختار های JavaScript
بعد از انجام سبک بندی، یک فایل جدید به نام «codes.js» را برای کد JavaScript بسازید. این مرحله، یک ظرف از داده ها( آرایه ها ) برای فهرست موسیقی قابل انتخاب را تعیین می کند ( که هر کدام عنوان و محل یافتن یک شی صوتی برای پخش کننده موسیقی و یک هویت را توصیف می کند. این هویت آیتم در حال پخش را تعریف می کند.

var playlist = [
{“title”:”Music 1”,”url”:”http://www.
noiseaddicts.com/samples_1w72b820/4037.
mp3”},
{“title”:”Music 2”,”url”:”http://www.
noiseaddicts.com/samples_1w72b820/4254.
mp3”},
{“title”:”Music 3”,”url”:”http://www.
noiseaddicts.com/samples_1w72b820/4289.
mp3”}
];
var audio = new Audio(playlist[0].url);
var playing = 0;

۶- پنجره بار گزاری شده
JavaScript صفحه قبل از اتمام بارگزاری DOM ، اجرا می شود. زمانی که بخواهید به عناصر در صفحه اشاره کنید این موضوع مشکل ساز می شود. این مشکل با استفاده از یک گوش دهنده وقایع»Load» بر روی صفحه حل می شود. زمانی که صفحه حاضر باشد ، این گوش دهنده از کد اضافی استفاده می کند. اولین کد برای اجرا در این جا ، فایل کنونی انتخاب شده در پخش کننده را نشان می دهد.

window.addEventListener(“load”, function()
{ document.querySelector(“[data-player]
*:first-child”).innerText = playlist[
playing ].title;
});

۷- گوش کننده پخش/ توقف
تعامل عناصر صفحه با استفاده از به اصطلاح پخش کننده ها استفاده می شود( زمانی که یک واقعه خاص شناسایی شوند ، مرور گر دستور اجرای کد کارکرد را صادر می کند) این مرحله از یک کارکرد برای اجرا براساس دکمه های پخش و توقف کلیک شده استفاده می کند. چنین کارکردی ، تنها فعالیت های پخش و توقف شی صوتی را تعیین می کند.

document.querySelector(“#play”).
addEventListener(“click”, function(){
audio.play();
});
document.querySelector(“#pause”).
addEventListener(“click”, function(){
audio.pause(); });

۸- پیوند های مسیریابی
مانند مرحله قبل یک پاسخ را به دکمه back( قبلی) و next( بعدی) کلیک شده اضافه کردیم. پاسخ کارکرد برای این دکمه ها متفاوت عمل می کرد ، زیرا کارکرد، ساختار داده های لیست پخش را برای پخش آیتم بعدی بررسی می کند. بعد از پیدا کردن آیتم لازم، عنوان شی صوتی و پخش کننده ،به ترتیب به روز رسانی می شوند. این کارکرد های پخش کننده نیز اطمینان حاص می کنند که کاربر نمی تواند بیش تر از اولین و آیتم در فهرست پخش را انتخاب کند.

document.querySelector(“#back”).
addEventListener(“click”, function(){
if(playing > 0)playing–;
audio.src = playlist[ playing ].url;
this.parentNode.querySelector(“*:first-
child”).innerText = playlist[ playing ].
title;
});
document.querySelector(“#next”).
addEventListener(“click”, function(){
if(playing < playlist.length-1)
playing++;
audio.src = playlist[ playing ].url;
this.parentNode.querySelector(“*:first-
child”).innerText = playlist[ playing ].
title; });

ارتقاء محتویات
استفاده از گزینه های صوتی در وب سایت برای پشتیبانی از محتویات کتبی نشان داده شده در صفحات وب کاربرد دارد.

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

It is main inner container footer text