Navigation section

Android Play mp3 onload body code

B

Bobby2025b

New Member
Joined
Dec 10, 2024
Messages
3
Im trying to play sound onload body

//section 1

works only if i click

button on click test1()

my code works...but doesn't play the file once

body onload fucntion

call runs

in , function test1

trying to play sound

tried doesn't run onload body

i placed my explanation inside my code below

so you can see what I'm doing...I left out full source code including my php code to save time. The parts I've added explains each section what I'm trying to accomplish. I hope

It's easy. I know there got to be a way.

If you try to run code my explanation will cause errors. I should of put a /* to ignore My

Notes. Here we go... planning on making a Christain website playing church services and bible study. Thank you anyone who can help

Jesus loves you.😀

Code: 
<body onload="test1()">

<button onclick="test1()">test1</button>

<script type="text/javascript">

function test1() {

if i use thr onload function call to test1

file wont play.

it only plays if i click the button on click test1()

l as you see my button above.

then it works. my goal is to run when page load

on load on the clients that way they

need to click a button.

section 2
Code: 
var audio = document.getElementById('sample');

loads mp3 to play. i use this box to manually

change mp3 file it prepares the mp3 to play

since i need to change mp3 often i need to use the text box

as you see below txt3.value holds to file

im playing next i know i can use

html
Code: 
scr,="apostles-authority.mp3"
to load in

the audio player. i removed it because i mentioned

ill do it using my php code manually.

i didn't include ,my php loads when my iframe loads .

there i read the php code.

section 3

. i use a file

below the file mp3 to play

txt3.value gets the file that my php reads in

using php open .pulls file

called apostles-authority.mp3 loads the name/ of the file manually

from a textbox inside myiframe1.textarea2

like you see below.
Code: 
txt3.value = iframe1.textarea2.value
my php that reads the file playing next

into
Code: 
iframe1.textarea2.value

reason i use php in the iframe. php lets

me use the open file code from the server.

that you see in section 3, the list of files

each file has @ infront. i use a split code in my php

code to put

i use index[0] gets first file copies the name

into iframe1.textarea2.value

later is used for my audio player

before.

before
Code: 
txt3.value="apostles-authority.mp3"

after

Code: 
txt3.value = iframe1.textarea2.value

my audio file player id="sample"

Code: 
var audio = document.getElementById('sample');

now my file im playing next is ready

Code: 
audio.src = "apostles-authority.mp3"; //This is a

audio.src = txt3.value; //

'

im not posting full code im trying to keep

it short.

Code: 
var music = 'apostles-authority.mp3'

I'm Not inluding my php code that reads file from

local serverside.

the php open my file of mp3

section 3
Code: 
@apostles-authority.mp3

@apostles-authority1.mp3

@apostles-authority3.mp3

pulls index.[0]
apostles-authority.mp3 reads it from

iframe1.textarea2.value as below shows

txt3.value = iframe1.textarea2.value

note it plays when i click the button

all works well..but it don't play body onload

like below,

Code: 
<body onload="test1()">

i also added 2 counter timers to delay

while file name is pulled from my php code .

2 timmer runs call function test1() to play file

but still wont

play.

i didn't include the 2 timmer here.

Code: 
playSegment(660.55515);

audio.play();

return false;

}</script>

Code: 
<div id="myDIV" class="hide">

<audio id="sample" src="" controls preload onfocusout="myFunction1()" ></audio>

</div>
<a href="javascript:playSegment(0.0, 20.5);">Play1</a>

<a href="javascript:playSegment(660.55515);">Play1</a>

Code: 
<script>

var audio = document.getElementById('sample');

var segmentEnd;

audio.addEventListener('timeupdate', function (){

$

if (segmentEnd && audio.currentTime >= segmentEnd) {

pause.play();

alert("")

}

console.log(audio.currentTime);

txt1.value =audio.currentTime

window.onblur = function (){ document.title='NOT FOCUSED'

audio.pause()

txt2.value ="false"

document.getElementById('iframe2').contentWindo

document.getElementById('iframe1').contentWindow.location.reload();

txt1.value = iframe1.textarea1.value

txt3.value = iframe1.textarea2.value

}

window.onfocus = function (){

document.title='FOCUSED'

test1()

txt2.value ="true"

audio.play();

}

let aud = document.getElementById("sample");

aud.onended = function() {

// alert("The audio has ended");

txt1.value = iframe1.textarea1.value

txt3.value = iframe1.textarea2.value

//jump1

//alert("")

//txt1.value=0.0

if (txt6.value =="")

{

//txt1.value = iframe1.textarea1.value

}else{txt1.value = txt6.value

test1()

txt6.value=""

document.getElementById('iframe2').contentWindow.location.reload();

document.getElementById('iframe1').contentWindow.location.reload();

}

playSegment(660.55515);

audio.play();

};

}, false);function playSegment(startTime, endTime){

segmentEnd = endTime;

//audio.currentTime = startTime;

audio.currentTime = txt1.value ;

audio.play();

}

</script>
 


Last edited by a moderator:
Solution
ChatGPT
Hi Bobby2025b! It sounds like you're on quite a journey with your project for a Christian website! From what you've shared, it looks like you're trying to get an audio file to play automatically when the body of your HTML document loads. However, it seems to only work when the button is clicked. Here are a few points to consider for solving this issue: 1. Audio Autoplay Policies: Modern browsers have restrictions on autoplaying audio files without user interaction. To comply with these policies, audio files often won't play automatically on page load, especially if they are not muted. This is likely why your test1() function works when you click the button but not when the page loads. 2. Using the play() Method...
Sort by date Sort by votes
Hi Bobby2025b! It sounds like you're on quite a journey with your project for a Christian website! From what you've shared, it looks like you're trying to get an audio file to play automatically when the body of your HTML document loads. However, it seems to only work when the button is clicked. Here are a few points to consider for solving this issue: 1. Audio Autoplay Policies: Modern browsers have restrictions on autoplaying audio files without user interaction. To comply with these policies, audio files often won't play automatically on page load, especially if they are not muted. This is likely why your test1() function works when you click the button but not when the page loads. 2. Using the play() Method: Ensure that you are calling the audio.play() method after setting the source properly and not before. It looks like your structure does this already, but it's important to double-check that the audio source is correctly set. 3. Debugging the Code: Here’s a simplified version of your JS code to help illustrate how to properly instantiate and play the audio file on load:
Code: 
html  test1
4. Testing Autoplay: You could also check if the audio starts playing if you mute it (e.g., audio.muted = true; before calling audio.play()) since some browsers allow muted audio to play automatically. Just remember to unmute it afterward if needed. 5. Console Logging: Add console logs or alerts to check if the function is being called, and whether the audio's source is correctly being set just before you call play(). 6. PHP Integration: It's essential that the file path you provide for the audio file works correctly with your PHP setup. Ensure the PHP script is functioning smoothly and the audio file can be accessed when the page loads. 7. Cross-browser Issues: Some functionality may vary across different browsers. Test your implementation in multiple browsers to see if any specific ones are restricting its behavior regarding autoplay. Feel free to test out these suggestions! If you run into any other issues, just let me know, and I'll be happy to help further. Jesus loves you too, and it sounds like you're doing meaningful work! God bless!
 


Upvote 0 Downvote
Solution
Thank-you ChatGpt. On my side my audio is not restricted Or muted in my browser setting. Also in my phone settings my sound is on..all permissions are onI was quirous why it didn't play. I forgot it would be up to the user to set permission phone settings. If a user says it don't play automatically when joining our page we could have them set sound permissions. I've tested your code it still didn't play. I had to click the button. What's cool about once my mp3 plays if I leave the page the sound puase. Until I come back to the tap. it would play until continuous. I has to add
JavaScript: 
window.onblur = function (){     document.title='NOT FOCUSED'

     audio.pause()

     txt2.value ="false"



 window.onfocus = function (){   
  
  
     document.title='FOCUSED'
     test1()
     txt2.value ="true"
     audio.play();
     }



Thank you. For reply. Sorry for posting my code with out code javascript tags so you can see code. Earlier I use tag I had to find it.
 


Last edited:
Upvote 0 Downvote
Hi Bobby2025b!
It sounds like you've been delving into some JavaScript to manage audio playback on your webpage. From your description, it seems like you're on the right track with the event handling for page focus and blur. However, if a user is still required to click a button to initiate the audio playback, it might be due to browser restrictions on autoplaying audio without user interaction.

Browser Autoplay Policies​

Many browsers have implemented policies that prevent audio from playing automatically to enhance user experience and prevent unwanted noise. Here's a summary of typical browser behavior:
  • User Interaction Required: Most browsers require a user action (like clicking a button) for audio to play.
  • Sound Permissions: In mobile settings, users may need to grant permissions explicitly for audio playback.

Implementing Audio Playback with JavaScript​

Here's a refined approach to ensure seamless playback, incorporating your focus and blur events along with user action:
JavaScript: 
let audio = new Audio('path_to_your_mp3.mp3');
let txt2 = document.getElementById("yourTextField"); // Make sure this ID is correct
window.onload = function() {
// Button to initiate play
document.getElementById("playButton").onclick = function() {
audio.play().catch(function(error) {
console.log("Playback failed: " + error);
});
};
};
window.onblur = function() {
document.title = 'NOT FOCUSED';
audio.pause();
txt2.value = "false";
};
window.onfocus = function() {
document.title = 'FOCUSED';
if (txt2.value === "true") {
audio.play().catch(function(error) {
console.log("Playback failed: " + error);
});
}
};

Suggestions​

  • User Interaction: Ensure there’s a clear button or element that users can click to start playing the audio, as this is generally required by modern browsers.
  • Testing: You mentioned testing on your end. Make sure to also try in different browsers and devices to understand how they handle audio playback.
  • Error Handling: The .catch() method will help log any playback issues, so the reason for failures can be diagnosed easily.
If a user comes to you saying that audio doesn't play automatically, guiding them to check their browser's settings for autoplay permissions or ensuring they click a play button would be effective.
Feel free to share if you have more questions or need further assistance!
 


Upvote 0 Downvote
Thanks you for fixing my first post with the code tags. Later. I have 2 iframes one loads.
iframe 1 loads my mp3 files.
Iframe 2 loads my commercial mp3.

I use div hide to hide the iframes. Hide parts of my page. It's under construction. I can took a screenshot. I came up with idea to play mp3 sound. I'm able to add commercials when I click a button my code pause the church services mp3 file. Save last seconds in a textbox. The commercial mp3 plays. The code listen if file plays ends to now copy my last minute the church service . It plays right where I left off at. It's pretty cool. I'm totally in control when commercial plays. What cool about it works. I moved from video mp4 to mp3 because when file size is big. The video don't play only smaller files play. I like using mp3 instead. I'm able to play any size limit. I think the audio control code plays mp3 in sections. I think it don't load the whole file into memory. I'm sticking to mp3. I might share later when I upload it on my host provider. And share it with you. When I'm done it would be very useful code. I fixing it so user can read message click to hear church services and enter chat run. Since it don't play. It ok. I'll leave it up to the user. The chat room I'll be adding will load once user clicks button to play. I'll un hide the chat room. From the hiden div I'll be adding later. The chat room will be some free chat service I will found that later and embed it in my page.Thanks again.
 


Last edited:
Upvote 0 Downvote
Hi Bobby2025b!
It sounds like you're making fantastic progress with your project! The way you've integrated iframes for audio playback and effectively handled commercials while pausing the church services audio is both clever and practical.

Highlights of Your Approach​

  • Using Iframes: Loading audio files in iframes is an interesting choice. Hiding them until needed helps maintain a clean UI while keeping your audio functionality intact.
  • Paused Playback: Saving the last seconds of audio playback and resuming from that point after the commercial ends is very user-friendly. This provides a seamless experience for your listeners, ensuring they don't miss any part of the service.
  • Switching to MP3: Given the challenges you faced with MP4 video files, transitioning to MP3 for audio makes complete sense—especially since MP3 files are generally smaller and easier to manage.
  • Memory Management: You're correct that most browsers handle audio files efficiently, often streaming rather than preloading entire files. This means you can handle larger files without significant memory impact, making an MP3 format a great choice for your application.

Potential Improvements​

  • User Feedback: It might be helpful to provide visual feedback to the user when the commercial is playing, perhaps changing the button text or showing a status message.
  • Error Handling: Just as with your previous code, implementing error handling for when audio fails to play or encounters issues can enhance user experience.
  • Testing Across Devices: Since mobile and desktop behave differently regarding audio playback, ensure you test the functionality across various devices and browsers.

Future Sharing​

I’d be very interested to see your final implementation when you’re ready to share! It could serve as a helpful example for others looking to create similar audio functionalities.
If you have any questions or need further assistance as you develop your project, feel free to reach out. Happy coding!
 


Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

FLanDre
  • Solved
Windows 7 WMP 12 Won't Play mp3 files below 320 kbps
Replies
2
Views
6K
FLanDre
FLanDre
Back
Top