Pari Digital Marketing

success behind you

Breaking

Amazon Summer Offers - Get 80% Discount

Sunday, 8 January 2023

How To Add Audio File To Blogger Website | Autoplay mp3 audio player

Stay Safe Wear Mask, Protect Your Self from COVID-19 Thanks For Visit My Website



सभी को नमस्कार।

Pari Digital Marketing में आपका स्वागत है। और इस Post में, मैं आपको बताऊंगा कि कैसे आप

अपनी ब्लॉगर वेबसाइट में ऑडियो फ़ाइलें जोड़ सकते हैं , क्या आप भी अपने ब्लॉगर वेबसाइट में Audio , MP3 फाइल को जोड़ना चाहते है। यहाँ में आपको दो तरीके बताने वाला हूँ। ये तरीके बहुत आसान है। चलिए जानते है कि How to add Audio MP3 Player in Blogger Website in Hindi. आप दिए गए कोड को Edit करके बहुत आसानी से Audio File जोड़ सकते है। और Code को edit  संपादक में एक साधारण HTML कोड जोड़कर ब्लॉगर में आसानी से एक ऑडियो फ़ाइल एम्बेड कर सकते हैं। 

How To Add Audio File To Blogger Website | Autoplay mp3 audio player
How To Add Audio File To Blogger Website | Autoplay mp3 audio player


 तो आइए जानते कि आप ऐसा कैसे How To Add Audio File To Blogger Website | Autoplay mp3 audio player कर सकते हैं।

How to Add MP3 Audio Player in Website in Hindi?

1. iframe Tag 
2. Audio HTML Tag

MP3 Audio Player Ko Blogger Website me Kaise Jode?

MP3 File Ko Blogger Me Kaise Add Kare?
ऑडियो Player को ब्लॉगर  जोड़ने के लिए आपको सबसे एक Audio , MP3, Songs , को Cloud Server , Google Drive में File Upload (MP3 Song upload) करना पड़ेगा। क्युकि आप जो songs ऑनलाइन चलना चाहते है तो उसे ऑनलाइन कही पर save करना पड़ेगा। 

Google Drive में File को कैसे upload करें?
Google Drive में MP3, Songs को अपलोड करने के लिए आपको निचे दिए गए स्टेप को फॉलो करें। 

1.  सबसे पहले आपको ऑडियो फाइल को गूगल ड्राइव पर अपलोड करना होगा । इसके लिए आपको Google Drive को search करना होगा। इसके लिए कई रास्ते है - Direct Google Search में Google Drive Search करे। या अपना Gmail लॉगिन करे,  प्रोफाइल चिन्ह के पास वाले 9 डॉट पर क्लिक करे और Drive पर क्लिक करे। 


2. अब Google Drive में फाइल upload करने के लिए New पर क्लिक करें। और अपने PC, Laptop से Songs को अपलोड करें।  तो यहां न्यू पर क्लिक करें और फाइल अपलोड पर क्लिक करें और आप ऑडियो फाइल अपलोड कर सकते हैं। 


3. फिर उस पर राइट क्लिक करें और गेट लिंक पर क्लिक करें। अब डिफ़ॉल्ट रूप से यह प्रतिबंधित पर सेट हो जाएगा, इसलिए आपको इसे इस लिंक वाले किसी भी व्यक्ति के लिए प्रतिबंधित करना होगा (Anyone with the link) और फिर फ़ाइल लिंक को कॉपी करना होगा । 


<iframe   src='https://drive.google.com/file/d/1-y4spNxH_ATUlgiThvCevjAV4aupLsCI/preview?usp=sharing' 
   width='100%'
   frameborder='0'
/>

4. अब आपको इस फाइल के यूआरएल को ऊपर दिए गए HTML फॉर्मेट में ऐड करना है। अपने जो Google Drive के song लिंक को कॉपी किया है वह इस तरह होगा https://drive.google.com/file/d/1-y4spNxH_ATUlgiThvCevjAV4aupLsCI/view?usp=share_link यहाँ पर  डिफ़ॉल्ट रूप से यह /view  दिखाएगा। इसलिए आपको इस /view के स्थान पर /preview में बदलना होगा।

या फिर ऊपर के iframe कोड में 1-y4spNxH_ATUlgiThvCevjAV4aupLsCI के स्थान पर आपको अपनी songs का id डालना है। 

5. अब इस कोड को कॉपी करें और ब्लॉगर डैशबोर्ड पर जाएं। और यहां ब्लॉग पोस्ट को ओपन करें और HTML व्यू पर क्लिक करें।अब इस आईफ्रेम कोड को यहां पेस्ट करें और यूआरएल को व्यू से प्रीव्यू में बदलना सुनिश्चित करें।

6. अब पब्लिश बटन को हिट करें। आइए ब्लॉग पोस्ट को एक नए टैब में खोलें और यहां, जैसा कि आप देख सकते हैं, ऑडियो प्लेयर एम्बेडेड है, लेकिन यह अच्छा नहीं लगता है, लेकिन यह ऑडियो फ़ाइल चलाएगा और आप यहां से ऑडियो या वीडियो को नियंत्रित कर सकते हैं। तो आप इस प्रारूप में ऑडियो फ़ाइल जोड़ सकते हैं। 

Method -2 - Audio HTML Tag - 

यहाँ हम HTML audio tag का इस्तेमाल करेंगे। तो बस इस कोड को यहां से कॉपी करें और यहां अपनी एमपी3 फाइल की आईडी बदलना सुनिश्चित करें और फिर पूरे कोड को कॉपी करें और ब्लॉग पोस्ट पर जाएं। आइए यहां से पिछले कोड को हटा दें और नया कोड पेस्ट करें और ब्लॉग पोस्ट को अपडेट करें।

<audio controls> <source src="https://drive.google.com/uc?export=download&id=1-y4spNxH_ATUlgiThvCevjAV4aupLsCI" type="audio/mpeg"/> </audio>

ऊपर दिए गए कोड में आपको 1-y4spNxH_ATUlgiThvCevjAV4aupLsCI के स्थान पर आपको अपने Song की ID डालना है।  Song ID change करने के बाद Code Copy करे और नई पोस्ट को ओपन करके html को select करके Paste करें और पोस्ट को  Publish करें। 

जैसा कि आप देख सकते हैं, ऑडियो प्लेयर जुड़ गया है और आप इसे ऑटोप्ले पर सेट कर सकते हैं। और ऐसा करने के लिए, नियंत्रणों के ठीक बाद ऑटोप्ले जोड़ें और अपडेट पर क्लिक करें।
इसलिए डिफ़ॉल्ट रूप से क्रोम कुछ मामलों में ऑटोप्ले सुविधाओं को ब्लॉक कर देता है । तो आइए देखें कि यह काम कर रहा है या नहीं। ऑटो प्ले काम कर रहा है। क्रोम ब्राउज़र कभी-कभी ऑटोप्ले सुविधाओं को अवरुद्ध कर देता है, लेकिन जब कोई उपयोगकर्ता किसी लिंक पर क्लिक करता है और फिर इस पृष्ठ पर उतरता है , तो ऑटोप्ले सुविधाएं काम करेंगी। 

तो आइए देखें कि आप ऑडियो प्लेयर को और कैसे कस्टमाइज़ कर सकते हैं ताकि आप इस तरह की चौड़ाई सेट कर सकें। तो बस ऑटोप्ले के ठीक बाद एक स्टाइल टैग जोड़ें । तो चलिए इस कोड को कॉपी करते हैं और फिर यहां चौड़ाई जोड़ते हैं। मैं इस चौड़ाई को 70% पर सेट कर दूंगा। आइए इस पोस्ट को अपडेट करें और इस पेज को रिफ्रेश करें। और जैसा कि आप देख सकते हैं, इस ऑडियो प्लेयर की चौड़ाई बढ़ाई गई है। और इस तरह, आप आसानी से ऑडियो प्लेयर की चौड़ाई बढ़ा सकते हैं, और उपयोगकर्ता इस ऑडियो फ़ाइल को अपने ब्लॉग पोस्ट से भी डाउनलोड कर सकते हैं और आप ऑडियो प्लेयर में एक कैप्शन भी जोड़ सकते हैं , बस ऑडियो टैग के ऊपर यह आंकड़ा टैग जोड़ें

तो चलिए बस इस कोड को कॉपी करते हैं और यहां इस कोड को फिर से बदलें । और जैसा कि आप देख सकते हैं, फिगर टैग जोड़ा गया है। और यहां आप इस ऑडियो प्लेयर का कैप्शन बदल सकते हैं। और चलिए इस पेज को अपडेट करते हैं। और चलिए इस पेज को फिर से रिफ्रेश करते हैं। तो जैसा कि आप देख सकते हैं, उपशीर्षक ऑडियो प्लेयर के ठीक ऊपर जोड़ा गया है ,  तो इस तरह आप अपने ब्लॉगर वेबसाइट में ऑडियो प्लेयर को कस्टमाइज़ कर सकते हैं, और आप इस ब्लॉग पोस्ट से सबसे उपयुक्त कोड चुन सकते हैं । मैं विवरण में लिंक छोड़ दूंगा। अगर आपको ब्लॉगर वेबसाइट पर ऑडियो फाइल जोड़ने के बारे में कोई संदेह है दोस्तों यह पोस्ट आपको कैसी लगी कमेंट में जरूर बताये। 

ऊपर दिए गए Code को डाउनलोड करे - 


4 comments:

  1. 스트레스로 인해 잠을 잘 못 잤는데 관리 후 몸이 이완되면서 숙면을 취할 수 있었고 출장마사지 경험은 수면 질 개선에도 큰 도움을 주는 것 같습니다

    ReplyDelete
  2. 초보자도 쉽게 적응할 수 있도록 구성되어 있어 부담 없이 시작할 수 있고, 야간 시간 활용이 가능한 밤알바라 룸알바 효율적인 근무 환경이 제공되어 만족도가 높습니다.

    ReplyDelete
  3. 여러 결제 수단 중에서도 문화상품권은 범용성이 뛰어나 자주 상품권현금화 됩니다. 게임, 쇼핑, 콘텐츠 등 다양한 분야에서 활용 가능해 실생활에서 매우 유용한 결제 방식입니다.

    ReplyDelete

New For You Open It

Popular Posts

WooCommerce