After years of fiddling around with html, I finally made my own webpage for kizzume.com to go to instead of just going to my myspace page (it used to go to my mp3.com page back before universal took it over). I’m using an animation technique and transparency layering technique that I just don’t see very often–in fact, I’ve never seen it used before.
What I’m wanting to figure out now is how to make a webpage play music automatically so I can have a section of the board where you can click on a link to hear my song, and when you do, you won’t see a player but will hear my song–or, if there’s a way to have minimal player controls show at 40 opacity. If anyone knows any tips for this, let me know.
Thanks for that. I actually didn’t realize how easy it was to do that… I was originally weary of flash–but it has the advantage of people not being able to easily grab the files it’s playing.
I’ve looked into several others since then too. Each has an advantage.
You’re right if by “not easily grab the file” you mean “not even looking at the page source”. It’s not really protected in any way, just not a blatant link to click.
Hehe, do elaborate… cuz I found that dewplayer chokes sometimes (doesn’t stream all of the file), but maybe that’s just something with my setup dunno.
I’m having -okay- luck with this new one I tried out–it’s on the music part of my page now.
player.swf and playlist.xml
I’m having problems getting this section to load the same in different browsers. Opera I don’t even want to talk about as their handling of transparencies is a joke–it brings the computer to a crawl.
The way it looks in IE is strange though–it moves the player to the right side and puts boxes around it. I don’t understand…
If you want to look at the files where they sit, just to look at the way I’ve done it–they’re both located in www.kizzume.com/kizzume
That was a nice attempt at the same effect, but no cigar.
This is using multi-layering. The color change is a one pixel tiled gif sitting in the background, which is why you see no gif 256 color dithering effect.
I was going to talk about how mine probably takes a lot more memory to load, but when I looked at the size of his gif–1.5mb, my whole webpage takes about 600k–I guess I finally HAVE done something right
Nice simple idea to put a color animating GIF behind a transparent PNG. Too bad it’s so CPU hungry, can you merge all the PNG layers, that would speed it up a lot I guess.
Yeah–I could do that, but then it would be a huge file–right now it’s several layers, including 2 1-pixel-wide fade layers, that create the illusion of a huge picture.
I do wish that doing simple things like that wouldn’t eat up the cpu so much–it actually doesn’t make any sense to me–when games, even old voxel shading games, can do it flawlessly and not even make the cpu usage budge. I’ve been trying to look into what it is that makes the rendering of those things take so much on a webpage.
I imagine as time moves on and as web standards start to get better, like with things like svg files, the importance of rendering those things efficiently will increase. You should see how awful Opera handles large transparencies in general. I found it interesting that Safari handles it the animation with layering best by far.
What I don’t know yet is if it renders any differently in Vista than in XP, since it uses direct3d to render the desktop.
I know what you mean, blending images has been an issue for ever.
Up until recently flash was really bad at doing it too, but now the player looks like it’s hardware accellerated a little bit, but plain browser rendering seems not to, in this case you really have a lot of pixels to render because of all the layers upon layers.
Just took a quick look at your html source, it’s pretty nasty, that’s definately why you can’t position your music player correctly, for instance you can only have one BODY tag on a page, and do clean up empty tables, div tags and so on.
I tried to run your site through http://validator.w3.org/, but it fails to check your page. If you can make it work, then it can help you locate and eradicate error tags on page.
I’m pretty sure it’ll be much faster if you don’t use such narrow things that get tiled!
E.g. Try replacing the 2x2 gif with something like 4x4 or 8x8, and the 1x990 thingies with 4x990 or 8x990 for example… the slight increase in size will be more than offset the speed gain, especially on slower computers. When something gets tiled, each instance of the pic is a separate drawing operation.
Of course you could also change the background color with javascript (maybe you can find something via googling) instead of using an animated gif
Amaya really is a great tool. My page isn’t perfect, but it’s not a rat’s nest anymore either. One of y’all PM’ed me and told me about Amaya (it was either here or on OnTheLeft). Thanks for that, whoever you are.
Both my main page and the music page can be viewed fine on all the browsers now. I can’t believe how much crap I had in the code before. It’s really starting to make sense now. Yee-haw!
