एचटीएमएल, सीएसएस, और जेएस

Question

के साथ एक ऑडियो टैग के आधार पर एक कस्टम संगीत प्लेयर कैसे बनाएं I ऑडियो टैग के अंदर "नियंत्रण" टैग का उपयोग किए बिना एक कस्टम संगीत प्लेयर बनाने की कोशिश कर रहा हूं। सबसे पहले, मैं एससीएम संगीत प्लेयर के समान कुछ बनाना चाहता हूं। मैं एससीएम द्वारा प्रदान किए गए एक का उपयोग नहीं करूंगा, क्योंकि यह किसी भी तरह से मेरी वेबसाइट पर जोड़े जाने पर बड़ी मात्रा में स्थान का उपयोग करता है, मुझे पता नहीं है कि इसे कैसे छुपाएं/दिखाएं क्योंकि यह सब एक स्क्रिप्ट टैग के भीतर है, और यह वास्तव में है वाई-धीमी गति पर असर पड़ता है।

यहाँ मैं बनाना चाहता हूं क्या की एक छवि है:

और यही मैं अब तक है: https://jsfiddle.net/e13gs8qg/6/(अद्यतन)

HTML: (अद्यतन)

<audio id="player" class="mediaplayerclass"> 
    <source title="Fruity Loops Own Track Copy" src="https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy.mp3" /> 
    <source title="Fruity Loops Own Track Copy 2" src="https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy_2.mp3" /> 
</audio> 

<div class="playermenuwrapper"> 
    <button id="previoussong" class="previoussongclass"> 
     Previous 
    </button> 
    <button id="playpause" class="playpauseclass"> 
     play 
    </button> 
    <button id="nextsong" class="nextsongclass"> 
     Next 
    </button> 
    <div id="songtitle" class="titleclass"></div> 
</div> 

सीएसएस:

.playermenuwrapper { 
    text-align:center; 
    margin: 0px auto; 
    max-width:100%; 
} 
.previoussongclass { 
    display:inline-block; 
    width:80px; 
} 

.playpauseclass { 
    display:inline-block; 
    width:80px; 
} 

.nextsongclass { 
    display:inline-block; 
    width:80px; 
} 

.mediaplayerclass { 
    display:block; 
    width:150px; 
    height:50px; 
    margin: 0px auto; 
} 
.titleclass { 
    display:inline-block; 
    text-align:center; 
    margin: 0px auto; 
    width:250px; 
} 

जे एस: (अद्यतन)

window.player = document.getElementById('player'); 
var playpause = document.getElementById('playpause'); 
var songtitle = document.getElementById('songtitle'); 
changesongtitle(); 
player.volume = 0.3; 

playpause.onclick = function() { 

    if (player.paused) { 
     changesongtitle(); 
     player.play(); 
     playpause.innerHTML = 'pause'; 

    } else { 
     player.pause(); 
     playpause.innerHTML = 'play'; 
     changesongtitle(); 
    } 
} 

function changesongtitle() { 

    var songtitle = document.getElementById('songtitle'); 

    if(player.src = "https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy.mp3") { 
    songtitle.innerHTML = "Fruity Loops Own Track Copy"; 
    } 

    if(player.src = "https://cdn.shopify.com/s/files/1/0804/2449/files/fruityloops_own_track_copy_2.mp3") { 
    songtitle.innerHTML = "Fruity Loops Own Track Copy 2"; 
    } 

} 

मैं इस पर stackoverflow पर कई सवाल पर ध्यान दिया है, लेकिन मैं अभी भी नहीं मिला है मैं क्या कर रहा हूँ के लिए जवाब।

• मैं खेल स्रोत फ़ाइल का शीर्षक कैसे प्राप्त कर सकते हैं? (अद्यतन)

• मैं कैसे स्रोत फ़ाइलों को बदलने के लिए "छोड़" और "सही" बटन कोड कर सकते हैं?

• मैं वॉल्यूम स्लाइडर कैसे बना सकता हूं?

• मैं ऑडियो की वर्तमान अवधि की समयरेखा कैसे बना सकता हूं?

• और आखिरकार, मैं वर्तमान समय और ऑडियो की पूरी अवधि को कैसे प्रदर्शित कर सकता हूं?

इस समय वर्तमान समय और अवधि गुणों का उपयोग कैसे करें।

Answer 1

जो मैं समझता हूं वह है कि आप अपने विशिष्ट उपयोग मामले के लिए कस्टम लाइब्रेरी बनाना चाहते हैं। मैं आपको Mediaelement.js को आजमाने का सुझाव दूंगा। इसमें बहुत सारी सुविधाएं हैं और यह लगभग सभी ब्राउज़रों पर भी काम करती है। इसके अलावा, अगली और पिछली के आधार पर गाने बदलने जैसी कुछ चीजें इस लाइब्रेरी के शीर्ष पर जोड़ दी जा सकती हैं क्योंकि यह लाइब्रेरी ओपन सोर्स है।

यहां तक ​​कि मैंने इसका उपयोग किया है और इसके शीर्ष पर कुछ कस्टम सुविधाएं बनाई हैं। https://github.com/hkasera/mediaelement-markers

लेकिन इससे पहले कि आपको यह समझने की आवश्यकता है कि एचटीएमएल 5 ऑडियो या वीडियो कैसे काम करता है।उसके लिए मैं निम्नलिखित लेख पढ़ने के लिए आप सुझाव है:

1. http://html5doctor.com/html5-audio-the-state-of-play/
2. http://www.html5rocks.com/en/tutorials/webaudio/intro/
3. https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Cross-browser_audio_basics