|
JavaScript - How To Play Music On A Site?
this site plays music when you are there.
how do they do it? Similar TutorialsHi, I would need your helpful with a code for playing a music or video after 5 seconds launched page. I need a code to say under <body> </body> like autoplay. Regards Bob Looking for a way to have background music play automatically when my site loads, with the music being randomly picked from a list of several songs.. So each time the page loads, a different song should play.. Can be JavaScript or Flash, whichever way works the best.. Any ideas?
How to add an .mp3 file using java-script with HTML. I wish to add an mp3 file as a background music to my webpage. It should load automatically while user viewing my home page. I'm doing a project in php. "Give me a simple and easiest guideline for me" -thank you Hello, I need help. Fast. I have enough HTML knowledge to get by but am miles away to be called an expert. I need to know how I can autoplay music with a click of a button. Its for a popular blogsite called Tumblr (oh c'mon I know you've heard of it). If possible, I hope that there won't be any pop-ups involved. Any and all help is greatly appreciated! (I think this is related to Javascript too ) I just added the SCM Music Player script to my WordPress site but now whenever I navigate to another page or news post the URL address doesn't change. The address bar stays static. How can I fix this? Here is the script code which was placed in Header.php within the <Body> tags: ======================================== <!--SCM Music Player by Adrian C Shum - http://scmplayer.net--> <script type="text/javascript" src="http://scmplayer.net/script.js" ></script> <script type="text/javascript"> SCMMusicPlayer.init("{'skin':'skins/black/skin.css','playback':{'autostart':'false','shuffle':'false','volume':'50'},'playlist':, <!-- playlist songs inserted here --> 'placement':'bottom','showplaylist':'false'}"); </script> <!--End of SCM Music Player script--> ====================================== Should I be adding this code someplace else? Thank you! I have music set to start playing when my website starts up...is there any way to keep it from restarting everytime I go back to the home page through clicking the home link from another page?
I hope someone can help me...I need to tweak this code so that background music will play randomly for an unlimited time. Right now, it plays a random song and then repeats it over and over. I just need to have it randomly change songs and keep playing! Here is the code I am using... Code: <script type="text/javascript">
var musicSource = [
"http://www.bigmacktrucks.com/music/1.mp3",
"http://www.bigmacktrucks.com/music/2.mp3",
"http://www.bigmacktrucks.com/music/3.mp3",
"http://www.bigmacktrucks.com/music/4.mp3",
"http://www.bigmacktrucks.com/music/5.mp3",
"http://www.bigmacktrucks.com/music/6.mp3",
"http://www.bigmacktrucks.com/music/7.mp3",
"http://www.bigmacktrucks.com/music/8.mp3"
];
var rand = Math.floor(Math.random()*musicSource.length);
document.write('<embed src="'+musicSource[rand]+'" autoplay="true" hidden="true" loop="true" />');
// -->
</script>
I think this is simple but I am a total noob at javascript! Thanks in advance! Hello, I am trying to change the background music on our website to be continuous, right now the music restarts every time you go to a new page. The webmaster who designed the website has this coding on the header page on the includes folder, he said setting it to restart with every page change was the only way we could set it up to be compatible with seo, I have had mixed information about this. Can anyone tell me how I should change this code without affecting the seo results. THANK YOU [code] <script type="text/javascript"> var flashvars = {}; flashvars.width = "70"; flashvars.height = "50"; var params = {}; params.wmode = "transparent"; var attributes = {}; attributes.id = "music"; swfobject.embedSWF("background_music.swf", "music", "70", "50", "8.0.0", true, flashvars, params, attributes); </script> [code] Hey all, I've built a website for my music and I'm fairly new to all this so bear with me. Essentially, I have two flash-based music players on my site. One is a simple single-track player that auto-plays some background music for the site. The functionality is limited to the user starting/stopping the music and adjusting the volume. The other is an advanced music player featuring a playlist of preselected tracks and allows the user to start/stop music, rewind, fast forward, adjust volume and select tracks in the playlist. This player does not start automatically. My question is this: when someone visits the site, the single-track background music player will start. Is there code that would allow the advanced music player, should it be turned on (i.e. someone selects a track and plays it), to override and actually stop the play of the single-track? TIA! so i am trying to make a music player where you select a song from a drop down list and then click submit. it then brings up the audio controls with the HTML5 "<audio>" tags and then you can click play and it should work. i am having trouble actually doing this though. the html is Code: <html> <head> <title>Music Player</title> <script language="javascript" type="text/javascript" src="popup.js"> </script> </head> <body bgcolor="000000"> <font color="lime" size="6"> <div align="center"> <u>The Mighty Peacock Music Player</u> </font> <br> <br> <font color="red" size="5"> <select id="convert_to" name="convert_to"> <option value="danza" id="danza">Danza Kuduro by Dan Omar</option> <option value="iron" id="iron">Iron by Woodkid</option> <option value="boot" id="boot">Das Boot by Vat19</option> </select> <br> <input type="submit" value="submit" onClick="dispResults(convert_to)"> <p>The song selector is not functioning yet. Sorry for the inconvinence.</p> <br> <br> <div class="music_box" id="music_box"> <audio src="/music/Danza Kuduro.mp3" controls="controls"> </audio> </div> </div> </body> </html> and the javascript is Code: function dispResults(convert_to) {
if (id == "danza") {
document.getElementById("music_box").innerHTML = "<p>" + <audio src="/music/Danza Kuduro.mp3" controls="controls"></audio> + "</p>";
}
if (id == "iron") {
document.getElementById("music_box").innerHTML = "<p>" + <audio src="/music/woodkid.mp3" controls="controls"></audio> + "</p>";
}
}
any help would be greatly appreciated. Thanks I am trying to make it so that when the page loads, it will random play a song from a list of songs. Also, when the first song finishes, another random song should play. I have this code: Code: <script type="text/javascript">
var numberOfSongs = 5
var sound = new Array(numberOfSongs+1)
sound[0]= "music/Rock/1.mp3"
sound[1]= "music/Rock/2.mp3"
sound[2]= "music/Rock/3.mp3"
sound[3]= "music/Rock/4.mp3"
sound[4]= "music/Rock/5.mp3"
sound[5]= "music/Rock/6.mp3"
function randomNumber()
{
var randomLooper = -1
while (randomLooper < 0 || randomLooper > numberOfSongs || isNaN(randomLooper)){ randomLooper = parseInt(Math.random()*(numberOfSongs+1))
}
return randomLooper
}
var soundFile = sound[randomNumber ()]
document.writeln ('<BGSOUND SRC="' + soundFile + '" loop=5>');
document.writeln ('<EMBED SRC= "' + soundFile + '" loop=5 PLAYCOUNT=3 hidden=true autostart=true><P>');
</script>
How would it be possible to play another random song after the song finishes? I have a tiny flash player(with controls) in a table on it's own html page. It only plays one piece of music. But I need an unusual popup script which I can't seem to find. I want the tiny player (75 x 30) to popup on it's own without all the window (chrome?) surrounding it. I want it to be in either the top or bottom left corner. I would also like it to popup on load but turn off when I go to a particular page that I have a sound video on and then turn off completely when they leave the domain. It is a music site. Can some one please write a script like this for me and how do I get around annoying popup blockers. Our website normally plays music onload that can be stopped when manually starting a video using onclick="stop1()". I've manipulated a javascript that detects if the user is a new or return user and plays the video automatically in a popup if the user is new. But, I cannot figure out how to either stop the music or prevent the music from starting at the same time. I've really got no experience with js and am fumbling my way around. would appreciate your help. I have an HTML document with an <embed> tag in order to play a video. <code> <embed src="someMovie.mpeg" autostart="false"</embed> </code> I want to be able to click on an image that is also in the document, and play the video that is associated with that image with an onclick action. In other words I want to load a different video than "someMovie.mpeg". I tried simply setting the src and autostart attributes of the embed tag to the new movie and true, but this does not play the new video. Is there a way I can do this? Hello Friends, I have an <img> Tab to play a video(of type .wmv). The image tag is as follows: <img border="0" dynsrc="Test1.wmv" start="fileopen" loop="1" width=1081 height=838> Everything works fine, but now I need to play a video list (up to 5 videos). As soon as one video stops another video should start playing (at the same position automatically, without any user input) and as soon as the last video is stopped, it should start the first video again. So it will be like a loop. How can I achieve the above requirement? Thanks. I have about 40 images on an educational website. When the user clicks each image, a different one second long mp3 should play without opening a new window. Is it possible to do this with javascript? Thanks in advance. Hi, I'm having a problem with 2 scripts in the same page. One's a rollover function and the other is for a dynamic image gallery. Either one separately works fine, but when together, the rollover is preventing the gallery from functioning. My javascript skills are limited. Any help is appreciated. Page can be seen he test site Code for page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Script-Content-Type" content="text/javascript" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
font-family: Arial, sans-serif;
background: url(images/bg.gif) #FFF;
}
* {
margin: 0;
padding: 0;
}
#wrapper {
width:950px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px;
background:#fff;
border-left:1px solid #036;
border-right:1px solid #036;
}
#footer, #push {
clear:both;
width:950px;
height: 30px;
margin:0 auto;
background:#036;
font-size:11px;
text-align:center;
color:#FFF;
}
#push {
background:none;
}
/* Navigation */
#nav ul, #nav li {
display:inline;
list-style-type:none;
}
#nav li {
height:55px;
width:119px;
background:url(button.jpg);
display:block;
}
#nav a {
height:32px;
width:119px;
display:block;
text-decoration:none;
background:url(button.jpg);
}
#nav a:hover {
background:url(button.jpg);
background-position:0px 55px;
}
#nav span {
display:block;
padding-top:10px;
color:#000;
font-weight:bold;
text-align:center;
}
/* Picture Gallery */
#right {
width:400px;
height:100%;
position: absolute;
top: 0px;
left:500px;
}
#filler {
background:url(fish9.jpg) top center no-repeat;
border-bottom:1px solid #333;
display:inline;
width:400px;
height:300px;
text-align:center;
position: absolute;
top:0;
left:0;
}
#thumbs {
width:400px;
position: absolute;
top: 330px;
left:0;
}
#thumbs ul {
display:inline;
list-style-type:none;
}
#thumbs ul li {
width:92px;
height:69px;
float:left;
display:inline;
padding-left:6px;
padding-bottom:6px;
}
#thumbs ul li a {
text-decoration:none;
}
#thumbs a img {
border: none;
}
#thumbs ul li.extrapixels {
padding-left:7px;
}
#message {
width:400px;
float:left;
height:70px;
text-align:center;
position: absolute;
top: 300px;
left:0;
color:#333;
}
#bigDynPic {
width:400px;
height:300px;
text-align:center;
position: absolute;
top: 0px;
left:0;
}
#bigDynPic img {
border-bottom:1px solid #333;
display:block;
}
#bigDynPic p {
font-family:Verdana, Sans-serif;
font-weight:bold;
font-size:80%;
background:#fff;
color:#333;
margin:0;
padding:2px 2px;
}
</style>
<script type="text/javascript">
<!--
function dyngallery()
{
var picId='bigDynPic';
var loadingId='loadingmessage';
var d=document.getElementById('thumbs');
if(!d){return;}
if(!document.getElementById(loadingId))
{
var lo=document.createElement('div');
d.parentNode.insertBefore(lo,d);
lo.id=loadingId;
lo.style.display='none';
}
var piclinks=d.getElementsByTagName('a');
for(var i=0;i<piclinks.length;i++)
{
piclinks[i].onclick=function()
{
document.getElementById(loadingId).style.display='block';
var oldp=document.getElementById(picId);
if(oldp)
{
oldp.parentNode.removeChild(oldp);
}
var nc=document.createElement('div');
d.parentNode.insertBefore(nc,d);
nc.style.display='none';
nc.id=picId;
var newpic=document.createElement('img');
newpic.src=this.href;
newpic.alt=this.getElementsByTagName('img')[0].alt;
newpic.title='Click to return to images';
newpic.onload=function()
{
document.getElementById(loadingId).style.display='none';
}
newpic.onclick=function()
{
this.parentNode.parentNode.removeChild(this.parentNode);
}
nc.appendChild(newpic);
np=document.createElement('p');
np.appendChild(document.createTextNode(this.getElementsByTagName('img')[0].alt))
nc.appendChild(np);
nc.style.display='block';
return false;
}
}
}
window.onload=function()
{
if(document.getElementById && document.createTextNode)
{
document.body.onmouseover=function()
{
dyngallery();
}
}
}
// -->
</script>
<script type="text/javascript">
<!--
window.onload = initMenu;
function initMenu() {
var e=document.getElementById('nav');
var links=e.getElementsByTagName('A');
for(i=0; i < links.length; i++) {
var thisLink = links[i];
if(thisLink.parentNode.tagName == "LI"){
setActivity(thisLink);
}
}
}
function setActivity(thisLink){
thisLink.onmouseover = mouseOver;
thisLink.onmouseout = mouseOut;
}
function mouseOver() {
this.parentNode.style.background = 'url(button.jpg) 0px 55px';
return this;
}
function mouseOut() {
this.parentNode.style.background = 'url(button.jpg)';
return this;
}
// -->
</script>
</head>
<body>
<div id="wrapper">
<ul id="nav">
<li><a href="index.html"><span>Home</span></a></li>
<li><a href="index.html"><span>Page1</span></a></li>
<li><a href="index.html"><span>Page2</span></a></li>
<li><a href="index.html"><span>Page3</span></a></li>
<li><a href="index.html"><span>Page4</span></a></li>
</ul>
<div id="right">
<div id="filler"> </div>
<div id="message">Click on thumbnail for larger picture</div>
<div id="thumbs">
<ul>
<li class="extrapixels"><a href="fish1.jpg"><img src="tn_fish1.jpg" alt="Sample 1" /></a></li>
<li><a href="fish2.jpg"><img src="tn_fish2.jpg" alt="Sample 2" /></a></li>
<li><a href="fish3.jpg"><img src="tn_fish3.jpg" alt="Sample 3" /></a></li>
<li><a href="fish4.jpg"><img src="tn_fish4.jpg" alt="Sample 4" /></a></li>
<li class="extrapixels"><a href="fish5.jpg"><img src="tn_fish5.jpg" alt="Sample 5" /></a></li>
<li><a href="fish6.jpg"><img src="tn_fish6.jpg" alt="Sample 6" /></a></li>
<li><a href="fish7.jpg"><img src="tn_fish7.jpg" alt="Sample 7" /></a></li>
<li><a href="fish8.jpg"><img src="tn_fish8.jpg" alt="Sample 8" /></a></li>
</ul>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<p>© 2009</p>
</div>
</body>
</html>
Scripts would normally be external, I just put them in the page for now for simplicity. Thanks. Which is the best way to play sound using javascript in a controlled manner ? I need a solution which work across all browsers. This is for my bingo game page which is fully based on ajax. Thanks . Hi I'm looking for solutions to play a movie file (it can be any format) on a keyboard press. I have this 'textsizer' code so far which I have adapted to work with swapimage but wondered if it would be possible to adapt this to play a movie too. function textsizer(e){ var evtobj=window.event? event : e //distinguish between IE's explicit event object (window.event) and Firefox's implicit. var unicode=evtobj.charCode? evtobj.charCode : evtobj.keyCode var actualkey=String.fromCharCode(unicode) if (actualkey=="a") MM_swapImage('Image1','','marta3.jpg',1) if (actualkey=="z") MM_swapImgRestore('Image1','','marta.jpg',1) } document.onkeypress=textsizer Hope someone can help Thanks Hello all; I am doing a site for a local business that uses radio advertising and has a jingle that they want to play once per visit only (so it does not play over again of they return to the same page later that day). I have tried to use yahoo player, Google player and the infamous wma player and all work well. I especially like the yahoo player but as will all the players I could not find a way to have it only play once per day per visitor. Is there a way to accomplish this? I was thinking using a tracking cookie but have no idea how to implement it. In the end I would like to accomplish the following: mp3 plays automatically on page load audio only playes once per day per visitor hava small player so if the visitorr wants to hear the jingle again they can do so. the player should be compact and cross browser compatible. Should be compatible with HTML 5.0 Transitional or at the very least 4.01 Any help would be appreciated. |
|||||||