Creating an Event on ASP.NET Websites

I'm attempting to add a button to my ASP.net website that, when clicked, will trigger a music player to start streaming music on the site.

Although I have experience creating buttons and handling events, I am struggling to get my player to play the *.mp3 file.

The following code snippet shows the music player I typically use on regular HTML websites:

<embed src="music/ToGlory.mp3" width="140" height="40" autostart="false" loop="TRUE" hidden="True"></embed>

This is what I attempted to do:

Sub submit(s As Object, e As EventArgs)

button=embed src="music/ToGlory.mp3" width="140" height="40" autostart="false" loop="TRUE" hidden="True" /embed

End Sub

asp.netcsshtml

Answer №1

Give it a shot

The .aspx Button control

<asp:button id="Button1"
       usesubmitbehavior="true"
       text="Click to Start Playing!"
       onclientclick="Play('URL for sound file, ex: http://www.my.com/a.mp3')"
       runat="server" onclick="Button1_Click" />

The JavaScript:

<script language="javascript" type="text/javascript">
 function Play(soundfile) {
 document.getElementById("Button1").innerHTML=
 "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
 }
 </script>

+1 if you find this useful :) .

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

What is the best approach to creating a fully rounded capsule using CSS?

I've been having trouble creating a complete capsule in CSS and I'm not achieving the expected outcome. Can anyone assist me in resolving this issue? I am new to CSS. Below is my code: <style> #myStyle { position: relat ...

htmlcss

establishing irregular edges for the div container

Looking to create a class that can transform an element into a specific shape using CSS. Not entirely sure if this is achievable with pure CSS alone, but applying a class to the image element will morph it into the desired shape as shown below. <style ...

htmlcss

Achieving Full Row Height in Twitter Bootstrap using CSS Grid

Before jumping to conclusions and marking this question as a duplicate, I want to clarify that I have already explored all suggestions provided on Stack Overflow, including the use of display: table. Unfortunately, none of them seem to work smoothly with B ...

htmlcsstwitter-bootstrap

Guide to configuring the overflow-y property for individual cells or rows in a Bootstrap-Vue table

Hello there, I am currently using Bootstrap-vue to display data that has been queried from a database. My goal is to have it displayed with an overflow-y style similar to this image. If you know how to achieve this effect, please share your solution. Here ...

htmlcssvue.jsbootstrap-4bootstrap-vue

Starting a tab just once

I have successfully created 4 static HTML pages that include: Home About Services Contact Each page contains a link that leads to another static page named myVideo.html, which plays a video about me in a new tab. The link is available on every page so ...

javascriptphpjqueryhtml

Using JavaScript or JQuery, move an image from one location to another by removing it and adding

Firstly, feel free to check out the JSFiddle example My task involves moving an image with the class "Full" after a div with the class "group-of-buttons" using JavaScript. Here is the snippet of HTML code: <img src="http://i.telegraph.co.uk/multimedia ...

javascriptjqueryhtmlcss

Obtaining a list of child span elements using xpath in Selenium

I am looking to retrieve all child span elements based on the following xpath //label[@for='someText']/span Expected result: <span class="someClass">"Find this text"</span> <span id="someId">" ...

javahtmlseleniumtestngui-testing

Is there a way to stop a music track from playing?

function playMusic(){ var music = new Audio('musicfile.mp3'); if (music.paused) { music.play(); } else { music.pause(); } } <input type="button" value="sound" onclick="playMusic()" ...

javascripthtmlcssaudio

Insert an HTML page into a div element

I am having an issue with my angular template. I have a div where I am attempting to load an HTML view file (.html) based on a $watch event, but for some reason, the HTML view is not being loaded into the div. Below is a snippet of my controller code that ...

javascriptjqueryhtmlangularjs

Pseudo Elements: The Transformative Power of Before and After

JS Fiddle Looking for some CSS help: <div id="strip"></div> This is my setup: width: 100%; height: 130px; background: grey; I'm trying to add a pseudo-element after the strip, positioned at the bottom. #strip:after { content: "" ...

htmlcss

The spacing issue for Bootstrap-5 justify-content is causing elements to not have any space in between

My goal is to separate 3 images with space around or space between based on my preference. However, the images seem to remain clustered together in the middle instead of being spread out with justify-content-around. I attempted adjusting the width of the ...

htmlbootstrap-5justify

What could be causing the overflow of my <table> data from its parent <div> container in Bootstrap?

Currently, I am trying to utilize angular in conjunction with bootstrap to present my data. I have mock data stored within a component and displayed in the html file of that component. However, I am facing an issue where when the table expands in size, it ...

htmlcssangularbootstrap-4

How do I incorporate pagination into a PL-SQL dynamic content table in Oracle Apex?

I've successfully created a PL-SQL dynamic content report in Oracle Apex, but I'm struggling with implementing pagination. With too many rows to display at once, adding pagination will greatly enhance the user experience. Here is a snippet of my ...

javascripthtmlcssplsqloracle-apex

Implement a click event using jQuery specifically for Internet Explorer version 7

How can I add an onclick attribute using jQuery that is compatible with IE7? So far, the following code works in browsers other than IE8 and Mozilla: idLink = Removelst(); var newClick = new Function(idLink); $(test1).attr('onclick', null).clic ...

javascriptjqueryhtmlcssbrowser

Maintaining a fixed header that remains visible while scrolling through a dropdown menu in Angular

In my application, I have a mat-select widget that displays a list of options. When scrolling within the list, I find it difficult to keep track of all the options. I am looking to enhance the user experience by adding a fixed header at the top of the opt ...

htmlcssangulartwitter-bootstrapflexbox

What is the best way to align my progress bar to the bottom of a button?

I've encountered a small issue that I'm struggling to resolve. My goal is to create a button with a Bootstrap progress bar at the bottom, but I can't seem to make it work as intended. Here's the current setup: https://jsfiddle.net/bob ...

htmlcssbootstrap-4vertical-alignment

Asp.Net's Interactive Menu Grid

I'm looking to create a dynamic Web page using Asp.Net that will feature a movable menu with icons, similar to a grid menu on Android. I'm not sure where to start - should I use CSS, Javascript, HTML5, or JQuery? All I want is a large icon menu t ...

javascriptjqueryasp.nethtmlcss

Is it possible to incorporate cmd.exe into an HTML file?

Currently in the process of creating an online batch tutorial and aiming to integrate the Windows command prompt as a dynamic element on my webpage. Initially attempted using the html5 embed tag, however encountered an error stating unsupported plugin. S ...

html

Employing the CSS not selector within JavaScript

I am facing an issue where my form darkens with the screen every time I click a button to show it, using JavaScript. If I were using CSS, I know I could use the :not selector, but I need guidance on how to achieve this in JS. Can anyone assist me? Below i ...

javascripthtmlcss

What is the best way to locate the text within a <div><span>text</span></div> tag using Beautiful Soup?

This block of code contains HTML elements: <div><div id="NhsjLK"> <li class="EditableListItem NavListItem FollowersNavItem NavItem not_removable"> <a href="/profile/Dileep-Sankhla/followers">Followers <span class="list_count"> ...

pythonhtmlweb-scrapingbeautifulsouphtml-parsing