Is the embedded audio player not showing up on the screen?

I've been trying to add music to my blog page using the Billy audio player. I have successfully done this in the past, but for some reason, the player is not appearing on the finished page (I checked on both FireFox and Google Chrome) and I can't figure out why.

Here's a snippet of the code I've used:

<html>
<head>

<title>Playlists</title>

<style>

/* --- MAIN FORMATTING --- */
body {
    background: #888888;
    margin: 0px;
    padding: 75px;
    word-wrap: break-word;
}

h1 {
    margin: -26px 0px -4px 10px;
    font-size: 30px;
    line-height: 30px;
    font-style: italic;
    color: #f9f9f9;
    text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
}

/* --- CONTENT --- */

.content {
    width: 620px;
    background-color: #202020;
    border: 1px solid rgba(249,249,249,0.1);
    border-radius: 10px;
    padding: 8px 10px;
    margin: 0px;
    color: rgba(255,255,255,0.7);
}

/* --- MUSIC PLAYER --- */
.musicplayer {
    color: black;
    text-decoration: none;
    background-color: #ffffff;
    border: 0px solid black;
    border-radius: 25px;
    padding: 5px 8px;
    margin: -26px 0px 2px 420px;
    width: 200px;
    height: 12px;
}

/* --- TABLE --- */
table {
    border-collapse: collapse;
    color: rgba(255,255,255,0.5);
    line-height: 130%;
}

tr {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

td {
    padding: 2px 5px;
}

</style>

</head>


<body>

<h1>Playlist</h1>

<div class="musicplayer"><embed src="http://www.sheepproductions.com/billy/billy.swf?autoplay=false&f0=http://k007.kiwi6.com/hotlink/2w46d4u3sh/Citizen_Soldiers.mp3&t0=Citizen Soldiers&f1=http://k003.kiwi6.com/hotlink/8kun7qcg5t/Immortals.mp3&t1=Immortals&f2=http://k003.kiwi6.com/hotlink/3rzujskuoo/Rewind.mp3&t2=Rewind&f3=http://k003.kiwi6.com/hotlink/oyl9ee9xsw/No_End_No_Beginning.mp3&t3=No End, No Beginning&f4=http://k003.kiwi6.com/hotlink/xgpyq94ryc/Sound_the_Bugle.mp3&t4=Sound the Bugle&total=5" quality="high" wmode="transparent" width="200px" height="10px" name="billy" align="middle" type="application/x-shockwave-flash"/></div>

<div class="content">
    <table>
        <tr>
            <td width=15px>1.</td>
            <td width=200px>"Citizen Soldiers"</a></td>
            <td width=400px>3 Doors Down</td>
        </tr>
        <tr>
            <td>2.</td>
            <td>"Immortals"</a></td>
            <td>Fall Out Boy</td>
        </tr>
        <tr>
            <td>3.</td>
            <td>"Rewind"</a></td>
            <td>Poets of the Fall</td>
        </tr>
        <tr>
            <td>4.</td>
            <td>"No End, No Beginning"</a></td>
            <td>Poets of the Fall</td>
        </tr>
        <tr style="border: 0px;">
            <td>5.</td>
            <td>"Sound the Bugle"</a></td>
            <td>Bryan Adams</td>
        </tr>
    </table>
</div>

</body>

</html>

Can someone please help me identify what mistake I might be making or what I may be overlooking?

EDIT: This is being added to a custom Tumblr page, if that makes any difference.

Answer №1

After reviewing your code in Notepad++, I confirmed its functionality on both Chrome and Firefox browsers. However, when attempting to integrate it into a blog or forum, it's important to note that these platforms may have specific syntax requirements for HTML posts.

Answer №2

After some investigation, I was able to pinpoint the issue. Surprisingly, it wasn't a flaw in my code at all; rather, Tumblr's SSL setting was causing interference with the embedded content. By disabling this feature, the music player now displays correctly as originally intended.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it permissible for H2 heading to resemble H1 visually, and vice versa, in compliance with WCAG guidelines?

My expertise lies in Accessibility testing. Currently, we are dealing with Two headings <h1 class="CssPropertywithSmallFontSize">Heading One</h1> <h2 class="CssPropertywithBiggerFontSize">Heading Two</h2> From a visual standpoint, ...

Color highlighting in dropdown HTML items

I'm trying to create a dropdown menu with alternating colors for the items. Can someone please provide the CSS code needed to style dropdown list items using ODD and EVEN? ...

Embed a video clip into an HTML webpage

I attempted to embed a video using HTML. I followed the player script instructions and added the necessary paths and scripts, but unfortunately, the video is not visible on the webpage. Instead, when clicking on the area where the video should be, it opens ...

Steady Content of a Parallax Webpage

Hey there! I recently put together this awesome site and I'm facing a challenge with fixing text on the first slide, specifically the one featuring the Nike basketball. Right now, the text 'The first of its kind' is part of the background im ...

The Vue 3 page does not allow scrolling unless the page is refreshed

I am encountering an issue with my vue3 web app. Whenever I attempt to navigate to a page using <router-link to ="/Dashboard"/> Here is the code for Dashboard.vue: <template> <div class="enquiry"> <div class= ...

What could be causing my CSS dropdown menu to not display properly?

I'm having trouble getting the dropdown to work when hovering over the li element with "portfolio" in the text. The code seems correct, but nothing happens when I try to hover over "Portfolio." Below is the code snippet: #navmenu ul { position: ...

Button from Bootstrap extends beyond the page on mobile devices

I am facing an issue with my button. It looks great on desktop, but when I switch to the mobile version, it goes beyond the screen width like in the image below: 1) How can I prevent this from happening with the code provided in my bootply? 2) Also, how ...

Adjusted the background scale transformation without impacting the content inside the div

My concern revolves around the transform: scale property. I am trying to achieve a gradual zoom effect on my background when hovered over, without affecting the text content. I have omitted browser prefixes for brevity. Below is the CSS code: #cont-nl { ...

Height and left properties do not work with CSS transitions

I am currently working on creating a custom toolbox. I want the toolbox to slide in from the left when opened, so I added a transition from left=-1500px to left=0;, which works perfectly. However, when I attempted to add a minimization feature by adding a ...

The placeholder string is being accepted as the input value for the number

My issue is with a form input of type number. When the form is submitted without entering any number, it treats the placeholder text "rating" as the value. How can I stop this from happening? I need to make sure that the input number field is marked as in ...

Retrieving Data from Database on the Current Page

Struggling with fetching data from a MySQL database using PHP search methods and displaying the results on the same page? Here's how you can achieve it. This HTML Script: <html> <head> <title>Digital Library</title> </head ...

How to Insert a Background Image into Advanced Custom Fields (ACF) using CSS

Hey there, I'm facing a bit of a challenge with this particular section. In the past, I've only included ACF PHP within HTML when the background image was directly in the HTML code. Now, however, I have two shapes specified in my CSS using pseudo ...

What is the best way to incorporate multiple Bootstrap templates into an Angular project without causing conflicts between them?

When incorporating a bootstrap template into the admin interface, it is important to consider that its design may vary from the template used for visitors. Mixing multiple styles based on different templates can lead to conflicting styles and can potenti ...

Implement feature to enable selection using jQuery

I have a question about implementing an <option value="fiat">Fiat</option>"> element into a dropdown list using jQuery. I've tried the code below and encountered some issues. When I click the button, I want to add the <option value= ...

There is a lack of a responsive page after being redirected from Facebook

Having an issue with responsiveness on my website at . When I access a webpage from the browser on my smartphone, the site is fully responsive. However, when I try to open it from a link in Messenger, it appears like the PC version shrunk down to fit a mob ...

Is there a way to extract the properties of a CSS class from a stylesheet and convert them into a hash using JavaScript or jQuery?

I am exploring a way to extract key value pairs from a CSS stylesheet related to a specific class or id into a JavaScript object for data accessibility. It is important to mention that I do not intend to apply this class directly to any DOM elements. In ...

Problem encountered with a selection menu

I'm experiencing some trouble with the dropdown menu. Whenever I try to move the mouse to access the dropdown menu, it seems unresponsive. I attempted adjusting the padding on a line of code but ended up moving the entire line instead. Here is the cod ...

What is the best way to distribute stroke width evenly on a rounded hexagon in an SVG?

I created a rounded hexagon with stroke width, but the top and bottom curves appear darker. Does anyone know how to evenly distribute the stroke width along the border? Here is my SVG code: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox ...

javascript create smooth transitions when navigating between different pages

As a newcomer to JS, I am currently working on creating a website with an introduction animation. My goal is to have this animation displayed on a separate page and once it reaches the end, automatically redirect to the next webpage. <body onload="setT ...

Help! The CSS height property is not working properly and I'm not sure how to resolve

I'm facing an issue with the height property of a specific div and I can't seem to fix it. SCSS: .security{ border: 3px #1D3176 solid; display: flex; h2{ position: ...