Javascript URL ক্যাচার MP3 Player

আসসালামু আলাইকুম,
এই কোড লিখতে আমাকে ৩টি ফোরামে কোশ্চেন পোস্ট করতে হয়েছে। :v

তবে অনেক সাহায্য পেয়েছি।

এটা একটা অডিও যেটাতে অডিও ফাইলের সোর্স পেস্ট করে দিলে সেই অডিও বাজতে থাকবে।

রেফারেন্সঃ

Stack Overflow

কোডঃ

<script type="text/javascript">
function setAudio()
{
var url = document.getElementById('url').value;
var audioPlayer = document.getElementById('audioplayer');
audioPlayer.src = url;
}
</script>
<center class="lolmanaudio">
<br>
<input type="text" id="url"/>
<button onclick="setAudio()">set Audio</button>
<h5><a href="http://blog.grplusbd.net">GR+ Bangladesh</a></h5>
<audio id="audioplayer" src="" controls>
Your browser does not support the audio element.
</audio><br>...
</center>

<style>
.lolmanaudio{
background-color: yellow;
}
button{
display: block;
font-size: 1.1em;
font-weight: bold;
text-transform: uppercase;
padding: 10px 15px;
margin: 20px auto;
color: white;
background-color: lime;
background: -webkit-linear-gradient(#888, #555);
background: linear-gradient(#7aeb0c, #529d09);
border: 0 none;
border-radius: 3px;
text-shadow: 0 -1px 0 #000;
box-shadow: 0 1px 0 #666, 0 5px 0 #444, 0 6px 6px rgba(0,0,0,0.6);
cursor: pointer;
font-family: calibri;
width: 30%;
text-shadow: 2px 2px 2px black;
text-decoration: none;
}
button:hover{
background: linear-gradient(lime, #529d09);
}

#url {
background: linear-gradient(white, white);
border: 4px solid lime;
border-shadow: 4px 2px 2px 9px #000000;
padding: 20px 10px;
width: 95%;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#url input {
outline: none;
}

#url input[type="text"] {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf7l1vKbYzD5YWMhgQ2mRNz4KrrOSzJJsnEHfQr7q_CNOFzhsaEagwMxonB_eyh5dNf4ZORbcXOgZzfK1QKr235j8gTEZ-EnWQH4-H7ajHacdCOQ1pS8mcJyGQOLRdbof_daHP9TuhHGd1/s1600/search-dark.png) no-repeat 10px 6px #fff;
border-width: 1px;
border-style: solid;
border-color: transparent;
font: bold 12px siyam rupali;
color: black;
width: 90%;
padding: 8px 15px 8px 30px;
}
audio {
background:#ff0000;
box-shadow: 0px 2px 2px #ffffff;
border:#488A13 1px solid;
opacity: .75;
}
audio:hover{
background:#002200;
opacity: .9;
}
</style>

Related Posts