16 Temmuz 2013, Salı

Analiz Edici Canlandırma Html5 Ses Apı Javascript Eğitimi Barlar

Bu programlama dersi size özel oluşturmak öğrenebilirsiniz html5 ses analizörü bar grafikleri oynuyor sesin frekansına bu hareket yönlerini kullanarak yeni JavaScript html5 Ses API ben sunmak için gidiyorum bu küçük komut özelleştirebilirsiniz herhangi bir şekilde size kavram kavramak hoşuma Biz derse başlamadan önce en bitmiş ürünlere bir göz atalım o sen Eğer bütün video için ayrılmamak için isteyip istemediğinizi değerlendirebilirsiniz ve komut dosyası hakkında derin fikir almak ve akılda tutulması herhangi animasyonlar CMI Video onlar gerçek vardır biraz daha dalgalı olacak tarayıcı

yazılımı nedeniyle benim video kare hızında böylece size bir ortamda bu çalıştırdığınızda çok daha akışkan etkilediğini görmek istiyorum sen sen 00 Tamam çıplak kemikleri bir html5 web belgeyi bu şekilde var biz başl

ayacağız Herkesin görebilirsiniz Ben sıfırdan üretim olacak benim küçük herhangi bir CSS koymak Uygulama stilim elemanı görünür herhangi bir JavaScript olacak benim komut dosyası eleman buraya gitmek ve be

“Ders Kodu: http://www.developphp.com/video/JavaScript/Analyser-Bars-Animation-HTML-Audio-API-Tutorial Yeni JavaScript HTML5 ses API yönlerini kullanarak oynuyor s...”
Adam Khoury

n her zaman eğer bu yüzden dahil ederek JavaScript yansıtmak edebilirsiniz sen Bu yansıtmak istiyorum CSS ile bunu yapabilirsiniz JavaScript herhangi bir nokta ve aynı ve daha sonra yapacağız, en azından o başka bir uygulama olacak biraz koyacağız Burada gövde elemanının içinde yüzden ilk yaratıcı yapalım en vermek kıyafetler birkaç satır aşağı gidelim en verelim o bir kimlik onun eşittir mp3 çalar çizgi içerde ve sonra biz zorunda kalacaksın var Çocu

Analiz Edici Canlandırma Html5 Ses Apı Javascript Eğitimi Barlar Resim 1 Analiz Edici Canlandırma Html5 Ses Apı Javascript Eğitimi Barlar Resim 2 Analiz Edici Canlandırma Html5 Ses Apı Javascript Eğitimi Barlar Resim 3 Analiz Edici Canlandırma Html5 Ses Apı Javascript Eğitimi Barlar Resim 4

k olacak bir kimliği olduğunu vermek olduğunu Ses kutuya eşit Biz programlı gidiyoruz nereye ve bu Bu ses kutunun içinde burada html5 ses elemanı eklemek Şimdi mp3 çalar içindeki ses kutusunda altında biz de olacak bir kimlik ver bir kampüs elemanı koymak için gidiyoruz onun eşit analizör için bayan biraz hareketli barlar işlemek için gidiyoruz edildi Bunun içinde kampüs elemanı ve en bu tuval öğesi kapatmak emin olalım ve bu uygulama için tüm HTML bazı CSS olacak pop olduğum kontör benim stil öğesi içine ilk ku

ralı görebilirsiniz etkileyen bir kimlik aşk mp3 çalar ile yaptığımız Burada bu adamı sağlar ve biz şu CSS özelliklerini veriyoruz Yeterince basit sonra içine gidiyoruz mp3 çalar onun çocuk erişen ve daha sonra çocuğun ses eleman programlı sevgili yerleştirmek için gidiyor Biz etkileyen konum bizim JavaScript kullanarak ses elemanı html5 ses o Bu ses kutuya burada alınacaktır eleman Biz mp3 çalar içine gidiyoruz, sonra o bu özellikleri veriyoruz konteyner ve içinde hiçbir kampüs elemanları etkileyen Doğru burada bu küçük adam olacağını ve bunu veriyoruz çok basit bu özellikler şimdi bu ne basit bir göz atın, eğer HTML ve CSS bize verir Eğer böyle bir şey görmek ve bir merkezli oluyor Tüm olacak hiçbir ses unsur var bakın mp3 çalar konteyner Burada javascript uygulanan böylece Javascript ilk şey ne zaman bir yer a comment içinde yeni bir örneğini fırın ses nesnesi oluşturmak diyor ve ben sadece yapacağız gösteri konum bu yüzden burada iki özelliği gördüm Bir HTML5 oluşturmak için bir program yaklaşımı Yeni yaratıyor ses eleman Ses nesne yüzden kurtarmak bizim ses eşittir Yeni bir ses nesnesi bu ses değişkeni yani yeni bir örneğini 7 ses nesnesi ve biz tarafından sadece kendi özelliklerinin bazıları söyleme ses kaynakları tane var mp3 izlemek için eşit var biz demek istedin oynamak ses dosyası var Biz varsayılan görmek istiyorum, çünkü ses kontrolleri true eşittir ses kontrolleri, ses nokta döngü gerçek eşittir Ses defalarca oynayacak bu şekilde o sonuna ulaştığında kendisi bütün yeniden başlar Onların işlevselliği sadece false true döndü istemiyorsanız Daha sonra ses nokta autoplay biz false olarak ayarlanmış Biz istemiyoruz, çünkü bunu yaparsanız, bizim oyuncu sayfası yüklerden kendisi tarafından oynamak için o zaman sadece bu yüzden biz bu gibi özelliklere sahip asker koydu ve biz krom bu veya krom tarayıcı siz tüm ister testi bu hale Alana JavaScript çünkü biz olacak yazılı konum için Şimdilik krom özgü olacak html5 bir yeri vardır ve yeni JavaScript API ve bu konuda bir lotta css3 Henüz 2014 yılına kadar standart değil bu yüzden şimdi Google Chrome'da siz testi tavsiye tüm tarayıcılarda standart HTML5 isim o zaman sadece herhangi birşey için kodunuzu ayarlayabilirsiniz krom kaymakam bir tarayıcıda bu hale bu yüzden eğer Eğer bir ses var görebilirsiniz Bir dosya bu yüzden gerçekten bu bir yoldur oynuyor Eğer sadece bir takımda oynayan, arka plan müziği koyabilirsiniz Herhangi bir web sayfası beş satır orada bu dört satır biz yapacağız bir javascript yapmak sonraki şey, diğer yorumda haklı bu senin analizörü kullanacağı tüm değişkenleri kurmak Bütün bu değişken burada göremiyor kurulan tüm bu değişkenlerin zaman isimler Benim komut dosyası çeşitli şeyler için olanlar kullanmak için gidiyor Şimdi bu Lyman altında kendimizi başka bir yorum sağa bu sayfa yüklendikten sonra mp3 çalar başlatılamıyor diyor Tüm vids böylece yapmak için pencerenin içine HTML biz sadece penceresinde yazdığınız Advent dinleyici load olayı pencereleri tamamen yüklü olduğunda bu yüzden dinlemeye ne Tüm bu HTML bu mp3 çalar olarak adlandırılan işlevini çalıştırdığınızda initialize mp3 çalar için kısa olan ve sonra biz yanlış kullanımı yakalama devlet şimdi üniforma Ching denilen olduğunu bu mp3 çalar ile başlangıç ​​mp3 çalar olan bu yüzden burada oturan bunu görebilirsiniz şu anda işlev pop var aday içindeki her satırı açıklamak Bütün pencerelerde HTML hakkında yüklenirken bitirdiğinizde bu nedenle bu işlevi çağrılır bunun içinde ilk satırda koşacağız MP3 olarak Biz ses öğe eklemek için gidiyoruz Biz programlı burada yarattığı sayfa kaynak belge üzerinde oturan ses kutusu d-IV I eleman Kimliği olmak olsun Ses kutusu kalem çocuğu nokta html5 ses elemanı çok temelde ses eleman Bu program aracılığıyla yerleştirilen olacak Bizim bağlam değişken atama nerede Audiovox sonraki satırda vermek ve biz sadece yeni bir ses bağlamda bağlam eşit hale yeni bir ses bağlam oluştururken böylece nesne örneği Nesne örneği ağları yeni ayırdı JavaScript html5 ses 10 görüntülemek için API gerçekten size Google'ı yeni JavaScript Ses API muhtemelen araştırma Vadeli JavaScript API Ses ya da html5 ses API ve sen de bulmak bilgilerin her türlü görürsünüz Biz oluşturmak için kullanıyorsanız ve ses bağlam nesne bilgilerini bizim Biz analizör değişkeni almak dahaki sefere bu yüzden analizörü ve biz analizör yöntemi oluşturmak koşmak Bağlam örneği oluşturmak ve üzerinde analizörü yöntemi analizör düğümü değil bir dahaki sefere bizim kampüs değişkeni atamak Aslında biz adında ettik eşit başvurmak için analizörü bunun yerine ben ekolayzır olacak isim oldu ekolayzır ama yapar Herhangi bir anlamda bir ekolayzır değil çünkü bu denkleştirme ama frekansını temsil ama onun bu kadar bir analizör aranmalıdır deriz candice buraya bu eleman eşittir bir fikir analizörü ile kampüs uzakta bir komut dosyası bilir nerede o bütün bu serin animasyon barlar işlemek için biz CTX değişkeni atamak kampüs olsun bağlam mesajı temsil ediyor ve argüman passin için 2d ya da geçmesi parametre 2d şimdi kampüs için yaptığımız son şey kısa mesaj olabilir kapıdan Biz sırayla mp3 çalar başlatırken olduğunuzda bu serin olması için canlandırılmış analizör çubukları kazanan ses çalma reroute işleme içine ses bağlamı kadar grafik Bizim ses bağlam nesnesi atanmış nerede ve görünür Şimdiye kadar kaynak değişkeni söyleyemem Bağlam örneği nesne ve biz oluşturma kullanın bağlam nesnesi için medya elemanı kaynak yöntemi ve biz uzaktan bir argüman ses nesne geçmesi Ses nesne oluşturmak medya eleman kaynağı geçirilir alır için Herhangi bir bu yöntemler siz yapabilirsiniz aklını burkulma eğer benim gibi bir yöntem söz konusu sadece araştırma gitmek Tüm hala deneysel teknoloji 2014 yılına kadar olan html5 ses API Eğer ben burada WebKit başvuruları kullanıyorum görebilirsiniz Bu Firefox sizin için daha fazla iş var Chrome'da bu test gerektiği anlamına gelir veya Internet Explorer 2014 yılına kadar bu yüzden ne zaman bu diğer tarayıcılar Ses API saygı vardır Eğer bu WebKit öneki ve adil çağrı kaldırabilirsiniz Yeni bir ses bağlam örnek M.Ö. Ben WebKit var nesne onların sadece bu yüzden bu benim deneyler için Chrome'da çalışır henüz Firefox ve Internet Explorer işe yaramazsa ve şikayette bulunabilirsiniz çünkü Bir lotta yeni JavaScript HTML5 ve CSS3 hatta henüz standardize olmadığını biliyoruz tarayıcısı olacak bulunuyor Bu komut tek şey bazen 2014 yılında sanırım ve şimdiye kadar vardı kullanılarak Bu tek satır olarak burada tarayıcı belirli önek yani sadece gelecekte herhangi WebKit öneki gerekmez unutmayın onların Monae öneki tanıtıyor veya MSP ya düzeltmek Büyük sorunlar standart sözdizimi o açıklayan bitmiş tamam yani ses bağlam hangi kaynaktan değişken Kaynak değişken atanır sonra bunu kendisine uygulanan oluyor Bağlam medya elemanları, kaynak yöntemi oluşturmak o zaman kaynak üzerinde connect yöntemini çalıştırmak ve aslında biz karışık alamadım o yüzden bu unsurlar kimliği değiştirmek izin en kılmak Analyzer diyelim kampüs kendi kampüs elemanları bir fikir verilmiş, böylece analizörü burada geçemez işleme özellikleri de kampüs için bu şekilde biz bu konuda karışık alamadım burada ve burada olmaktan analizörü kelime yanı sıra değişken isim Bu kaynak için bağlantı yöntemde yüzden ayrı tutacak yapacağız olan analizörü değişken geçmek ediyoruz düğüm yöntemi analiz ve bundan sonra biz tekrar connect yöntemini kullanın analizörü değişkeni ve argüman üzerine biz bağlamak geçti yöntem Bağlam doc yer ve ilk gözler mp3 çalar sonra son şey Fonksiyon biz çerçeve luper fonksiyonu yürütme r olan fonksiyon bizim kod içine yazılır olmamıştır henüz biz doğru koyacağız İşte İlk gözler mp3 çalar fonksiyonu altında tamam biz çerçeve luper işlevinde koymak şimdi önce kendimiz içine bir kaç yorum ve çerçeve luper fonksiyonunu yazalım Eğer ses frekansı isteyen Anne tarzı grafikler animasyon bu nedenle herhangi bir stil grafik onu sen istersen Ses frekansa animee içinde yapılabilir Biz yerine koymak üzereyiz bu çerçeve luper fonksiyonu Şimdi bu çerçeve luper işlevi varsayılan kare hızında döngü olacak Tarayıcı sağladığı saniyede yaklaşık 60 kare olacak veya saniyede altmış kez şimdi çerçeve luper fonksiyonu içine attı head için Şimdi her satır hatırlıyorum içinde ve her satırı anlatacağım Fonksiyon sereceğim Bu çerçevede çok çok çok çok çok çalışıyor olması Saniyede kere o çünkü yok neden çok çok hızlı ve nedeni Biz istek animasyon çerçeve yöntemi koşuyoruz böylece pencere nesnesi bu biraz bir javascript üzerinde hemen hemen size döngü işlevini verir ve geçmişte biz setTimeout kullanmak için kullanılan ve için döngü işlevleri için aralık dedi Biz isteği kullanmanız animasyon amaçları ama şimdi önerilir yerine animasyon çerçeve yöntemi aralığının bahsedilen 112 SetTimeout Biz döngü işlevini gerekirse bir web sayfası şeyler animasyon ama animasyonlar bir sürü şimdi css3 geçiş yoluyla kılınabilir size böylece Hatta animasyonlar bir sürü için bir döngü işlevini ihtiyacınız olmaz biz yapıyoruz bu özel animasyon ses programlama için Biz döngü fonksiyonu yüzden ben sadece bunu adında var gerektirir Burada bu hat çerçeve Loper sorumlu budur tekrar ve tekrar ve tekrar döngü yapma için şimdi burada sonraki satır biz bir dizi elde ediyoruz bulunuyor iki yeni instanceof bir sen kur nesnesine Biz o analizör nokta aracılığıyla bir argüman olarak geçiyoruz Frekans olmuştur sayısı böylece temelde bir dizi olsun veri ses frekans temsilidir Sonra tekrar bir analiz değişkeni almak ve biz onlar olsun koşmak Üzerinde frekans veri yöntemini ısırmak ve biz o yöntem ile FPC dizi geçiyoruz ve bu iki çizgiler kampüs takas başa Her bu işlev döngüler zaman ve renk görünümü çubukları ayarı Zaten ne istersen renk yapmak görüntülemek veya sarı için barlar değiştirmek için Eğer gibi bu hemen hemen sadece çok basit bu çizgi orada bunu Bütün kampüs temizler Ben işlemek için 100 bar istedik çünkü ve daha sonra bu değişken çubuklar 100 olarak ayarlanır Şimdi bu küçük döngü bu 100 bar verecek Farklı bir küçük Heights saniyede birçok birçok birçok kez Bu fonksiyon kendisi fonksiyonu için böylece her zaman çerçevesi görünüm döngüler her zaman İkinci çok çok çok çok çok katıdır çalışır Yüz bar farklı yüksekliklerde işlenecek gidiyor for döngüsü bu nedenle temelde bu saniyede çok çok çok çok kez kaçmayacak 100 kez ve ikinci o mindboggling oluyor için pek çok kez oldu nasıl var güzel dans animasyon efekti elde bu nedenle bu döngüde işlenir ki her çubuk için Her biri farklı bir fuar vermek istiyorum kampüs içinde, aksi takdirde hepsi her üstüne yığılmış olacak çünkü diğer Yaptığımız so what yatay düzlem olduğunu boyunca aldığımız II değişken ilk kez görüyoruz bu lube çalışır Gözleri olacak 0 nedenle temelde bu denklemin eşit olacak bar x, 0 kere üç eşit olduğunu söylüyorlar ve bir dahaki sefere bu döngü bu bir olacak ishal bu adam ve temelde son kez İran'ın bu 99 olacak Bu denklem çubuğu x 99 kere üç eşit diyecek onlar değil bu yüzden natchez alan barlar yapmanızı sağlar birbirinin üstüne oturan bu numaralarını değiştirebilirsiniz Bu şeylerle oynamak ve bar ile şimdi ne olsun etkisi bakın Her çubuklar olacak iki ile pikseller ve bar yüksekliği Bu çubuklar aşağı yukarı dans yapar ve gerçekten ne yani ne yapmamız biz frekans veri almak olduğunu MTK dizisindeki bu özel endeks için ve biz ikiye bölünür ve biz olmak istiyoruz negatif bir sayı bu denklemin sonucu negatif bir sayı olmak çok koymak ve eksi o denklemin önce biz koşmak Phil kampüsünde yöntem temelde tüm barlar berabere harap 100 bar kadar böylece her her bar çizer Bu Phil recht yöntemiyle çekilir ve ben burada sizin için biraz yorumunu koymak O Phil recht bu dört parametre alır diyor temelde barlar fuar dikdörtgen bir çizim koymak konumu, ve yüksekliği ile neden olan fuar bu kadar Eğer değişkenler bu dört etapta batıyordu görebilirsiniz Orada parametreler biz şimdi için WebKit önek kullanan konum ve 2014 değil çünkü henüz biz yapacağız Google Chrome tarayıcısında bu testi bu yüzden Google Chrome'da sen bu hale var Biz güzel sonuçlar elde senin tarayıcı ortamında madeninde çok yumuşak çalışır Benim animasyon sadece benim video eğitimi biraz dalgalı görünebilir, çünkü Kalın kare hızı böylece temelde tarayıcınızda bütün bu çalıştırdığınızda yapacaksın ne kadar küçük olduğunu görmek tamam bu yüzden bu çocuklar oluşturabilirsiniz nasıl içine bazı fikir almak yardımcı olur umarım Serin küçük analizör çubuk grafik Ben oluşturulabilir farklı tür grafik gösterdi değilim Farklı stilleri sesi mp3 çalarlar bağlanabileceğini analizleri ve olacak orada benim kanal gelen çok daha fazla öğreticiler olmak HTML5 ve JavaScript ses programlama hakkında Gerçekten çok şey var, çünkü sen oluşturabilirsiniz kadar çok yazılım yapabilir Bu çevrimiçi DJ yazılımı davul makineleri çalıştırmak edeceğiz yazılım tür kullanılarak yapılacak bu küstahlık gibi izleme yazılımı html5 ve JavaScript ve çevrimiçi çalışacak insanlar doğrudan çevrimiçi müzik kaydedebilirsiniz Sunucu ardışık sağ.

Açıklama

Ders Kodu: http://www.developphp.com/video/JavaScript/Analyser-Bars-Animation-HTML-Audio-API-Tutorial Yeni JavaScript HTML5 ses API yönlerini kullanarak oynuyor sesin frekansına hareket özel animasyonlu HTML5 Ses Analiz çubuğu grafikleri oluşturmak için öğrenin. Sen küçücük komut dosyası konsepti kavramak kez istediğiniz şekilde özelleştirebilirsiniz.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.8/10

  • 242
    Olumlu
  • 4
    Olumsuz
  • 84
    Yorum
  • 24133
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • cosmicrocketman

    cosmicrocket

    17 NİSAN 2006
  • Thom Hall

    Thom Hall

    24 Kasım 2006
  • Videojug

    Videojug

    25 EKİM 2006

ANKET



Bu sayfa işinize yaradı mı?